<template>
  <FrostedGlass class="px-4 py-2 mx-4 my-3 flex items-center">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
    </svg>
    <input
      type="text"
      :placeholder="placeholder"
      class="bg-transparent outline-none flex-1 text-gray-700 placeholder-gray-400"
      @input="handleSearch"
    />
  </FrostedGlass>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'
import FrostedGlass from './FrostedGlass.vue'

const props = defineProps({
  placeholder: {
    type: String,
    default: '搜索'
  }
})

const emit = defineEmits(['search'])

const handleSearch = (e) => {
  emit('search', e.target.value)
}
</script>