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

interface Item {
  value: string
  label: string
}

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

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

<template>
  <SelectRoot v-bind="forwarded">
    <SelectTrigger :icon-name="iconName" class="flex justify-between items-center">
      <SelectValue :placeholder="placeholder" />
    </SelectTrigger>

    <SelectContent class="rounded border bg-white">
      <SelectGroup>
        <SelectLabel v-if="label" class="px-2 py-1 text-xs 2xl: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>
