<script setup lang="ts">
import { RadioGroupRoot } from "reka-ui";
import { cn } from "@/lib/utils";

const props = defineProps<{
  modelValue?: string | number | null;
  disabled?: boolean;
  class?: string;
}>();

const emit = defineEmits<{
  "update:modelValue": [value: string | number | null];
}>();
</script>

<template>
  <RadioGroupRoot
    :model-value="
      modelValue === null || modelValue === undefined ? '' : String(modelValue)
    "
    :disabled="disabled"
    :class="cn('grid gap-2', props.class)"
    @update:model-value="
      emit('update:modelValue', $event === '' ? null : $event)
    "
  >
    <slot />
  </RadioGroupRoot>
</template>
