<script setup lang="ts">
import { ref, watch } from "vue";

const emit = defineEmits<{ search: [query: string] }>();
const query = ref("");
const inputRef = ref<HTMLInputElement | null>(null);
let timeout: ReturnType<typeof setTimeout>;

watch(query, (val) => {
  clearTimeout(timeout);
  timeout = setTimeout(() => emit("search", val), 300);
});

defineExpose({ focus: () => inputRef.value?.focus() });
</script>

<template>
  <input
    ref="inputRef"
    v-model="query"
    type="text"
    placeholder="Search notes..."
    class="search-input"
  />
</template>

<style scoped>
.search-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--fs-border-color);
  border-radius: var(--fs-radius-sm);
  font-size: 1rem;
  box-sizing: border-box;
  background: var(--fs-surface-raised);
  color: var(--fs-text-primary);
}
.search-input::placeholder {
  color: var(--fs-text-tertiary);
}
</style>
