<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { Input } from "@/components/ui/input"
import { cn } from "@/lib/utils"
import { useVModel } from "@vueuse/core"

interface Props {
    defaultValue?: string | number
    modelValue?: string | number
    class?: HTMLAttributes["class"]
    placeholder?: string
    type?: string
    icon?: any
    iconSize?: string
    id?: string
}

const props = withDefaults(defineProps<Props>(), {
    placeholder: "Search...",
    type: "text",
    iconSize: "6",
    id: "search"
})

const emits = defineEmits<{
    (e: "update:modelValue", payload: string | number): void
}>()

const modelValue = useVModel(props, "modelValue", emits, {
    passive: true,
    defaultValue: props.defaultValue,
})
</script>

<template>
    <div class="relative w-full items-center">
        <Input :id="id" :type="type" :placeholder="placeholder" :class="cn('pl-10', props.class)"
            v-model="modelValue" />
        <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2" v-if="icon">
            <component :is="icon" :class="`size-${iconSize} text-muted-foreground`" />
        </span>
    </div>
</template>
