<script setup lang="ts">
import { SelectRoot } from 'radix-vue'
import {
  SelectTrigger,
  SelectContent,
  SelectValue,
  SelectGroup,
  SelectItem,
  SelectSeparator,
} from '~/components/pub/ui/select'
import type { SelectRootProps, SelectRootEmits } from 'radix-vue'
import { useForwardPropsEmits } from 'radix-vue'

interface Item {
  value: string
  label: string
}

const props = defineProps<
  SelectRootProps & {
    items: Item[]
    placeholder?: string
    label?: string
    separator?: boolean
  }
>()
const emits = defineEmits<SelectRootEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <SelectRoot v-bind="forwarded">
    <SelectTrigger class="">
      <SelectValue :placeholder="placeholder" />
    </SelectTrigger>

    <SelectContent class="rounded border bg-white">
      <SelectGroup>
        <SelectLabel v-if="label" class="px-2 py-1 text-sm font-semibold">
          {{ label }}
        </SelectLabel>

        <SelectItem
          v-for="item in items"
          :key="item.value"
          :value="item.value"
          class="cursor-pointer px-2 py-1 hover:bg-gray-100"
        >
          {{ item.label }}
        </SelectItem>

        <SelectSeparator v-if="separator" class="my-1 h-px bg-gray-200" />
      </SelectGroup>
    </SelectContent>
  </SelectRoot>
</template>
