<script setup>
    import { reactiveOmit, useVModel } from '@vueuse/core';
    import { ChevronDownIcon } from 'lucide-vue-next';
    import { cn } from '@/lib/utils';

    defineOptions({
        inheritAttrs: false
    });

    const props = defineProps({
        modelValue: { type: null, required: false },
        class: { type: null, required: false }
    });

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

    const modelValue = useVModel(props, 'modelValue', emit, {
        passive: true,
        defaultValue: ''
    });

    const delegatedProps = reactiveOmit(props, 'class');
</script>

<template>
    <div class="group/native-select relative w-fit has-[select:disabled]:opacity-50" data-slot="native-select-wrapper">
        <select
            v-bind="{ ...$attrs, ...delegatedProps }"
            v-model="modelValue"
            data-slot="native-select"
            :class="
                cn(
                    'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed',
                    'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
                    'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
                    props.class
                )
            ">
            <slot />
        </select>
        <ChevronDownIcon
            class="text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none"
            aria-hidden="true"
            data-slot="native-select-icon" />
    </div>
</template>
