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

const props = defineProps<{
  value: string | number;
  disabled?: boolean;
  class?: string;
}>();
</script>

<template>
  <RadioGroupItem
    :value="String(value)"
    :disabled="disabled"
    :class="
      cn(
        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
        props.class,
      )
    "
  >
    <RadioGroupIndicator class="flex items-center justify-center">
      <span class="h-2 w-2 rounded-full bg-current" />
    </RadioGroupIndicator>
  </RadioGroupItem>
</template>
