<template>
    <SelectItem :value="value" :disabled="disabled" class="text-base py-2 leading-none text-light-60 dark:text-dark-60 flex items-center px-6 relative select-none data-[disabled]:text-light-50 dark:data-[disabled]:text-dark-50 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-light-30 dark:data-[highlighted]:bg-dark-30 data-[highlighted]:text-light-100 dark:data-[highlighted]:text-dark-100">
        <SelectItemText class="">{{ label }}</SelectItemText>
        <SelectItemIndicator class="absolute left-1 w-4 inline-flex items-center justify-center">
            <Icon icon="radix-icons:check" />
        </SelectItemIndicator>
    </SelectItem>
</template>

<script setup lang="ts">
import { Icon } from '@iconify/vue';
import { SelectItem, SelectItemIndicator, SelectItemText } from 'radix-vue'
const { disabled = false, value } = defineProps<{
    disabled?: boolean
    value: NonNullable<string>
    label: string
}>();
</script>