<script setup lang="ts">
defineProps<{
    modelValue?: string | number | null;
    disabled?: boolean;
    value: string | number;
    name: string;
    describedBy?: string;
}>();

const emit = defineEmits<{
    "update:modelValue": [value: string];
}>();

function onChange(event: Event): void {
    emit("update:modelValue", (event.target as HTMLInputElement).value);
}
</script>

<template>
    <label
        class="relative rounded-lg border-2 border-black/20 px-3 py-1 has-[:checked]:border-black has-[:disabled]:opacity-40 dark:border-white/20 dark:has-[:checked]:border-white"
    >
        <input
            type="radio"
            :name="name"
            :value="value"
            class="invisible absolute inset-0"
            :disabled="disabled"
            :checked="String(modelValue) === String(value)"
            :aria-describedby="describedBy"
            @change="onChange"
        />
        <slot />
    </label>
</template>
