<!-- components/SearchInput.vue -->
<script setup>
import { CloseCircle } from '@vicons/ionicons5'
import {
  Camera,
  Search,
} from 'lucide-vue-next'

const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['update:modelValue', 'search'])

function handleSearch() {
  if (props.modelValue) {
    emit('search', props.modelValue)
  }
}
function clearInput() {
  emit('update:modelValue', '')
}
</script>

<template>
  <div class="relative flex items-center bg-[#f1f2f7] rounded-md px-2 py-2">
    <input
      type="text"
      :value="modelValue"
      placeholder="搜索模型/图片/创作者寻找灵感"
      class="w-[280px] h-4 bg-[#f1f2f7] rounded-md border-0 outline-none text-gray-800 text-[12px] placeholder:text-gray-400"
      @input="$emit('update:modelValue', $event.target.value)"
      @keyup.enter="handleSearch"
    >
    <div class="flex items-center w-5 mr-2">
      <n-icon v-if="modelValue" size="20" class="cursor-pointer" @click="clearInput">
        <CloseCircle />
      </n-icon>
    </div>

    <Camera class="h-5 w-5 text-gray-400 mr-3 cursor-pointer" />
    <Search class="h-5 w-5 text-gray-400 mr-3 cursor-pointer" @click="handleSearch" />
  </div>
</template>

<style scoped>
</style>
