<template>
  <div v-if="hasMainCategory" :class="['flex flex-col gap-[25px]', isOpen && 'border-b border-block pb-[10px]']">
    <div @click="toggle" class="flex items-center justify-between rounded-lg cursor-pointer">
      <div class="flex items-center justify-between w-full">
        <p class="text-lg xl:text-2xl font-extrabold text-black dark:text-white">
          {{ mainCategoryName }}
        </p>
        <span :class="['flex items-center justify-center',isOpen && 'rotate-180', 'transition-all']"><i
            class="iconify i-lucide:chevron-down text-button shrink-0 size-6 ms-auto"></i></span>
      </div>
    </div>

    <ul class="flex flex-col gap-[25px]" v-show="isOpen">
      <li @click="$emit('change-category', child)" v-for="child in subcategories" :key="child.id"
        class="text-base xl:text-lg cursor-pointer flex justify-between items-center"
        :class="child.id === props.active ? 'text-yellow' : ''">
        <span>{{ child.langs[0].Name }}</span>
        <span>12</span>
      </li>
    </ul>
  </div>
  <div v-else>
    <!-- Optional: Placeholder or message when main category is not available -->
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// Define the props
const props = defineProps({
  data: Array,
  active: Number
});

const isOpen = ref(false);

const toggle = () => {
  isOpen.value = !isOpen.value;
};

// Computed properties
const hasMainCategory = computed(() => props.data.length > 0 && props.data[0].langs && props.data[0].langs.length > 0);
const mainCategoryName = computed(() => hasMainCategory.value ? props.data[0].langs[0].Name : '');
const subcategories = computed(() => hasMainCategory.value && props.data[0].children ? props.data[0].children : []);
</script>