<script setup lang="ts">
import { RadioGroupRoot, RadioGroupItem, RadioGroupIndicator } from "reka-ui";
import Label from "../ui/Label.vue";
import type { FieldDefinition } from "./types";

const props = defineProps<{
  field: FieldDefinition;
  modelValue?: unknown;
  error?: string;
}>();

defineEmits<{
  "update:modelValue": [value: string];
}>();
</script>

<template>
  <RadioGroupRoot
    :model-value="props.modelValue as string"
    :disabled="field.readonly"
    class="flex flex-col gap-2"
    @update:model-value="$emit('update:modelValue', $event)"
  >
    <div
      v-for="(label, value) in field.options ?? {}"
      :key="value"
      class="flex items-center gap-2"
    >
      <RadioGroupItem
        :id="`${field.name}_${value}`"
        :value="String(value)"
        class="border-input ring-offset-background focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border shadow focus:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary"
      >
        <RadioGroupIndicator class="flex items-center justify-center">
          <div class="h-2 w-2 rounded-full bg-primary-foreground" />
        </RadioGroupIndicator>
      </RadioGroupItem>
      <Label :for="`${field.name}_${value}`">{{ label }}</Label>
    </div>
  </RadioGroupRoot>
</template>
