<template>
    <RadioGroupRoot :disabled="disabled" v-model="model" class="flex flex-col gap-2 p-2">
        <Label v-for="option in options" class="flex items-center gap-2">
            <RadioGroupItem :disabled="(option as RadioOption).disabled ?? false"
                :value="(option as RadioOption).value ?? option"
                class="border border-light-60 dark:border-dark-35 bg-light-20 dark:bg-dark-25 w-5 h-5 outline-none cursor-default hover:border-light-70 dark:hover:border-dark-40 
                focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40 data-[disabled]:bg-light-10 dark:data-[disabled]:bg-dark-10 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20">
                <RadioGroupIndicator>
                    <Icon icon="radix-icons:check" class="relative w-5 h-5 -top-px -left-px" />
                </RadioGroupIndicator>
            </RadioGroupItem>
            {{ (option as RadioOption).label ?? option }}
        </Label>
    </RadioGroupRoot>
</template>

<script setup lang="ts">
import { Icon } from '@iconify/vue/dist/iconify.js';
export interface RadioOption { 
    label: string
    value: string
    disabled?: boolean
}

const { disabled = false, options } = defineProps<{
    disabled?: boolean
    options: string[] | RadioOption[]
}>();
const model = defineModel<string>();
</script>