<script setup>
import { useEmailAutocomplete } from '@/utils/emailAutocomplete'

defineOptions({ inheritAttrs: false })

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

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

const { emailOptions, handleEmailSearch } = useEmailAutocomplete()
</script>

<template>
  <a-auto-complete
    :data="emailOptions"
    :model-value="modelValue"
    allow-clear
    v-bind="$attrs"
    @search="handleEmailSearch"
    @update:model-value="emit('update:modelValue', $event)"
  >
    <template v-for="(_, name) in $slots" #[name]="slotData">
      <slot :name="name" v-bind="slotData || {}" />
    </template>
  </a-auto-complete>
</template>
