<template>
  <div role="search">
    <input
      :value="modelValue"
      type="search"
      :placeholder="placeholder"
      aria-label="Search documents"
      class="border border-gray-300 rounded-lg px-3 py-2 text-sm w-56 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
      @input="emit('update:modelValue', $event.target.value)"
      @keydown.escape="emit('update:modelValue', '')"
    />
  </div>
</template>

<script setup>
defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  placeholder: {
    type: String,
    default: 'Search documents...',
  },
})

const emit = defineEmits(['update:modelValue'])
</script>
