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

defineProps<{
  columns: SolutionColumn[];
  banner: NavBanner | null;
  visible: boolean;
}>();
</script>

<template>
  <Transition name="nav-dropdown">
    <div
      v-if="visible && columns.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 p-6 gap-6"
    >
      <div class="flex gap-6">
        <div
          v-for="col in columns"
          :key="col.id"
          class="min-w-[150px]"
        >
          <h3 class="text-[15px] font-bold text-gray-800 pb-3 mb-3 border-b border-gray-200 whitespace-nowrap">
            {{ col.title }}
          </h3>
          <ul class="space-y-2">
            <li v-for="link in col.links" :key="link.id">
              <a
                :href="link.link"
                target="_blank"
                class="text-[14px] text-gray-600 hover:text-primary transition-colors flex items-center gap-1.5"
              >
                {{ link.title }}
                <span
                  v-if="link.tag === 'hot'"
                  class="text-[10px] text-white bg-red-500 px-1.5 py-0.5 rounded leading-none"
                >HOT</span>
                <span
                  v-if="link.tag === 'new'"
                  class="text-[10px] text-white bg-green-500 px-1.5 py-0.5 rounded leading-none"
                >NEW</span>
              </a>
            </li>
          </ul>
        </div>
      </div>

      <div v-if="banner" class="shrink-0 self-start">
        <a
          :href="banner.link"
          target="_blank"
          class="block w-[180px] h-[140px] rounded-lg overflow-hidden group"
        >
          <img
            :src="banner.image"
            :alt="banner.title"
            class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
          />
        </a>
      </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>
