<script setup lang="ts">
import { useGameDataStore } from '#layers/stores/useGameDataStore'
import type { GameDataValue, GameDataGnb } from '#layers/types/api/gameData'

const gameDataStore = useGameDataStore()

const gameData = gameDataStore.gameData as GameDataValue
const gnbList = gameData?.gnb?.menus as GameDataGnb['menus']
</script>

<template>
  <header
    class="bg-theme-foreground text-theme-foreground-reversal relative z-50"
  >
    <LayoutStoveGnb />
    <div
      data-name="header-game"
      class="px-[40px] h-16 flex items-center whitespace-nowrap"
    >
      <!-- 로고 -->
      <div data-name="header-logo" class="mr-[40px]">
        <AtomsLocaleLink to="/brand">
          <img
            :src="gameData?.gnb?.bi_path"
            :alt="gameData?.game_name"
            class="h-[30px]"
          />
        </AtomsLocaleLink>
      </div>

      <!-- 메인 네비게이션 -->
      <nav data-name="header-nav" class="flex items-center space-x-[32px]">
        <template v-if="gnbList">
          <div
            v-for="(gnbItem, key) in gnbList"
            :key="key"
            class="relative group"
          >
            <!-- Link 컴포넌트 사용 -->
            <MoleculesHybridLink
              :to="gnbItem.url_path"
              :target="gnbItem.link_target"
              class="relative flex items-center h-[64px]"
            >
              {{ gnbItem.menu_name }}
              <AtomsIconsArrowDown v-if="gnbItem.children" class="ml-1" />
              <span
                class="absolute bottom-0 left-0 w-full h-2 border-b-2 border-transparent transition-border-color group-hover:border-theme-foreground-reversal group-active:border-theme-foreground-reversal-10"
              />
            </MoleculesHybridLink>
            <div
              v-if="gnbItem.children"
              class="absolute top-full left-[-28px] min-w-[190px] pt-[4px] pointer-events-none group-hover:pointer-events-auto"
            >
              <ul
                class="bg-theme-foreground-10 rounded-[20px] shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 p-3"
              >
                <li v-for="child in gnbItem.children" :key="child.menu_name">
                  <!-- Link 컴포넌트 사용 -->
                  <MoleculesHybridLink
                    :to="child.url_path"
                    :target="child.link_target"
                    class="flex items-center px-4 py-[9px] rounded-[12px] transition-background hover:bg-theme-foreground-reversal-40 active:bg-theme-foreground-reversal-70"
                  >
                    {{ child.menu_name }}
                    <AtomsIconsLinkOut
                      v-if="child.link_target === '_blank'"
                      class="ml-1"
                    />
                  </MoleculesHybridLink>
                </li>
              </ul>
            </div>
          </div>
        </template>

        <!-- 구분선 -->
        <div class="w-px h-4 bg-theme-foreground-reversal-30" />

        <!-- 이벤트 -->
        <a href="#" class="flex items-center space-x-[3px] text-gradient-pink">
          <AtomsIconsStar />
          <span>이벤트</span>
          <AtomsIconsStar />
        </a>
      </nav>

      <!-- 오른쪽 영역 -->
      <div data-name="header-right" class="ml-auto">
        <div class="relative group">
          <AtomsButton size="small">게임 시작</AtomsButton>
        </div>
      </div>
    </div>
  </header>
</template>
