<template>
    <div class="relative w-full max-w-[340px]">
        <input
            id="employee-search"
            v-model="model"
            type="text"
            :placeholder="placeholder"
            class="h-10 w-full rounded-md border border-neutral-300 bg-white pl-3 pr-10 text-md text-neutral-900"
        />
        <Icon
            name="mdi:magnify"
            size="18"
            class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-neutral-500"
        />
    </div>
</template>

<script setup lang="ts">
const model = defineModel<string>({required: true})

withDefaults(defineProps<{
    placeholder?: string
}>(), {
    placeholder: "Recherche d'un employé"
})
</script>
