<template>
  <div
    v-if="hasMainCategory"
    :class="[
      'flex flex-col gap-[25px]',
      isOpen && 'border-b border-block pb-[10px]',
    ]"
  >
    <div
      class="flex items-center justify-between rounded-lg cursor-pointer"
      @click="toggle"
    >
      <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"
        /></span>
      </div>
    </div>

    <ul v-show="isOpen"
        class="flex flex-col gap-[25px]"
    >
      <li
        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' : ''"
        @click="$emit('change-category', child)"
      >
        <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,
})

defineEmits(['change-category'])

const isOpen = ref(false)

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

// Computed properties
const hasMainCategory = computed(
  () =>
    props.data
    && 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>
