<template>
  <RadioGroup
    :model-value="modelValue"
    @update:model-value="$emit('update:modelValue', $event)"
  >
    <RadioGroupLabel class="heading-1 mb-8 block">
      {{ label }}
    </RadioGroupLabel>
    <div
      class="align-items-center flex flex-col justify-between justify-items-center space-y-6 md:flex-row md:space-x-6 md:space-y-0"
    >
      <RadioGroupOption
        v-for="item in items"
        :key="item.value"
        as="template"
        class="flex-1"
        :value="item.value"
        :data-cy="`radio-${item.value}`"
      >
        <div
          class="flex-1 cursor-pointer py-10 text-center text-xl font-bold hover:border-gray-500 hover:bg-gray-200 ui-checked:bg-sky-500 ui-not-checked:border"
        >
          <RadioGroupLabel as="span">
            {{ $t(item.name) }}
          </RadioGroupLabel>
        </div>
      </RadioGroupOption>
    </div>
  </RadioGroup>
</template>

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

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

interface Props {
  modelValue: any;
  items: RadioItem<any>[];
  label?: string | undefined;
}

withDefaults(defineProps<Props>(), {
  label: undefined,
});
defineEmits(["update:modelValue"]);
</script>
