<template>
  <RadioGroup
    :model-value="modelValue"
    class="border p-12"
    @update:modelValue="$emit('update:modelValue', $event)"
  >
    <RadioGroupLabel class="text-5xl mb-12 leading-normal font-bold block">{{
      label
    }}</RadioGroupLabel>
    <div class="flex justify-between align-items-center justify-items-center space-x-6">
      <RadioGroupOption
        v-for="item in items"
        :key="item.value"
        as="template"
        class="flex-1"
        :value="item.value"
      >
        <div
          class="py-10 text-xl flex-1 text-center cursor-pointer font-bold ui-checked:bg-sky-500 ui-not-checked:border hover:border-gray-500 hover:bg-gray-200"
        >
          <RadioGroupLabel as="span">
            {{ item.name }}
          </RadioGroupLabel>
        </div>
      </RadioGroupOption>
    </div>
  </RadioGroup>
</template>

<script setup lang="ts">
import type { RadioItem } from "@/components/learningPath/feedback.types";

import {
  RadioGroup,
  // RadioGroupDescription,
  RadioGroupLabel,
  RadioGroupOption,
} from "@headlessui/vue";

defineProps<{
  modelValue: any;
  items: RadioItem<any>[];
  label: string;
}>();
defineEmits(["update:modelValue"]);
</script>
