<template>
  <div
    :model-value="modelValue"
    class="border p-12"
    @update:modelValue="$emit('update:modelValue', $event)"
  >
    <h2 class="text-5xl mb-12 leading-normal font-bold block">{{ label }}</h2>
    <div class="flex flex-col justify-start align-items-start justify-items-start">
      <ItCheckbox
        v-for="item in items"
        :key="item.value"
        :label="item.name"
        class="mb-4"
      />
    </div>
  </div>
</template>

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

import ItCheckbox from "@/components/ui/ItCheckbox.vue";

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