<template>
  <nav
    class="relative pb-8 transition-all duration-250 ease-in-out md:px-10 md:pb-0"
  >
    <ul
      class="flex h-full flex-col gap-4 pt-5 text-2xl md:flex-row md:gap-2 md:pt-0 md:text-base md:font-medium"
    >
      <li
        v-for="(link, i) in mainMenuLinks"
        :key="`global_${i}`"
        class="flex items-stretch px-4 md:px-0"
      >
        <div
          v-if="link.children?.length"
          class="min-w-[60px] transition-all duration-250 ease-in-out md:relative"
        >
          <PageHeaderGlobalMenuLinkGroup v-bind="link" />
        </div>

        <div
          v-else
          class="flex h-10 min-w-[60px] items-center hover:text-primary-500 md:h-20 lg:justify-between"
        >
          <VuepalLink
            :to="link.href"
            class="flex h-[50px] w-full items-center px-4 pl-2 transition-all duration-250 ease-in-out md:size-auto md:px-3"
          >
            {{ link.label }}
          </VuepalLink>
        </div>
      </li>
    </ul>
  </nav>
</template>

<script lang="ts" setup>
const { mainMenuLinks } = useInitData()
</script>
