<script setup lang="ts">
import type { SelectHTMLAttributes } from "vue";
import { cn } from "@/lib/utils";

interface Props extends /* @vue-ignore */ SelectHTMLAttributes {
  class?: string;
  modelValue?: string | number;
}

const props = defineProps<Props>();
defineEmits<{ "update:modelValue": [value: string] }>();
</script>

<template>
  <select
    v-bind="props"
    :class="
      cn(
        'border-input bg-background ring-offset-background focus:ring-ring flex h-8 w-full appearance-none items-center rounded-md border px-3 py-1 text-sm transition-colors focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
        props.class,
      )
    "
    @change="
      $emit('update:modelValue', ($event.target as HTMLSelectElement).value)
    "
  >
    <slot />
  </select>
</template>
