<script setup lang="ts">
import type { CheckboxItem } from "@/components/ui/checkbox.types";
import ItCheckbox from "@/components/ui/ItCheckbox.vue";

const props = defineProps<{
  items: CheckboxItem<any>[];
  label: string | undefined;
}>();
const emit = defineEmits(["update:items"]);

function updateItems(itemValue: string) {
  const items = props.items.map((item) => {
    if (item.value === itemValue) {
      item.checked = !item.checked;
    }
    return item;
  });
  emit("update:items", items);
}
</script>

<template>
  <h3 class="mb-6 block font-bold leading-normal">{{ label }}</h3>
  <div class="flex flex-col">
    <ItCheckbox
      v-for="item in items"
      :key="item.value"
      :checkbox-item="item"
      :class="item.subtitle ? 'mb-6' : 'mb-4'"
      @toggle="updateItems(item.value)"
    />
  </div>
</template>
