<script setup lang="ts">
import type { RecommendCategory } from '~/composables/useNavData';

const props = defineProps<{
  categories: RecommendCategory[];
  activeIndex: number;
  visible: boolean;
}>();

const emit = defineEmits<{
  'update:activeIndex': [index: number];
}>();

function onCategoryHover(idx: number): void {
  emit('update:activeIndex', idx);
}

const activeCategory = computed(
  () => props.categories[props.activeIndex] ?? null,
);
</script>

<template>
  <Transition name="nav-dropdown">
    <div
      v-if="visible && categories.length > 0"
      class="absolute left-0 top-full bg-white rounded-lg shadow-[0_4px_25px_rgba(179,185,191,0.3)] border border-gray-200 flex z-50 overflow-hidden"
    >
      <ul class="w-[240px] border-r border-gray-200 py-3 shrink-0">
        <li
          v-for="(cat, idx) in categories"
          :key="cat.id"
          class="flex items-center justify-between px-6 py-4 cursor-pointer text-base transition-colors"
          :class="idx === activeIndex
            ? 'pl-8 bg-inkreach-homepage-1 text-primary font-medium'
            : 'text-gray-600 hover:text-primary'"
          @mouseenter="onCategoryHover(idx)"
        >
          <span>{{ cat.title }}</span>
          <i class="fa-solid fa-chevron-right text-xs opacity-40"></i>
        </li>
      </ul>

      <div class="p-6 w-[720px]">
        <p class="text-base text-gray-800 font-medium mb-4">
          {{ activeCategory?.title }}
        </p>
        <div class="grid grid-cols-2 gap-4">
          <a
            v-for="item in activeCategory?.items ?? []"
            :key="item.id"
            :href="item.link"
            target="_blank"
            class="group block rounded-lg overflow-hidden"
          >
            <div class="w-full h-[130px] rounded-lg overflow-hidden bg-inkreach-homepage-1">
              <img
                :src="item.image"
                :alt="item.title"
                class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
              />
            </div>
            <p class="mt-2 text-[15px] text-gray-700 group-hover:text-primary transition-colors truncate">
              {{ item.title }}
            </p>
          </a>
        </div>
      </div>
    </div>
  </Transition>
</template>

<style scoped>
.nav-dropdown-enter-active,
.nav-dropdown-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.nav-dropdown-enter-from,
.nav-dropdown-leave-to {
  opacity: 0;
  transform: translateY(8px);
}
</style>
