<template>
  <div class="border-border border-b">
    <UContainer
      class="mx-auto w-full max-w-[360px] px-[16px] sm:max-w-[768px] sm:px-[17px] md:max-w-[1000px] md:px-[24px] xl:max-w-[1920px] xl:px-[80px]"
    >
      <div class="hidden h-[120px] w-full items-center justify-between xl:flex">
        <ul class="flex items-center gap-20 whitespace-nowrap">
          <li
            v-for="(item, index) in menuStore.menu"
            @click="menuStore.navigateToItem(item);"
            :key="index"
            class="hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer text-lg transition-all"
          >
            0{{ index + 1 }} <br />
            {{ item.name }}
          </li>
        </ul>
        <img class="dark:hidden" src="/logo.png" alt="Frame" />
        <img class="hidden dark:block" src="/logo-dark.png" alt="Frame" />
        <div class="flex items-center gap-[30px]">
          <i class="uil uil-user text-[35px] cursor-pointer"></i>
          <i class="uil uil-shopping-cart text-[35px] cursor-pointer"></i>
        </div>
        <ThemeSwitcher />
        <LangSwitcher />
        <button
          class="hover:bg-button-hover bg-button cursor-pointer rounded-xl px-6 py-3 font-medium text-white transition-all"
        >
          E-shop
        </button>
      </div>
      <div
        class="hidden h-[116px] w-full items-center justify-between md:flex xl:hidden"
      >
        <img src="/logo.png" alt="Frame" />
        <div class="flex items-center gap-6">
          <i class="uil uil-user text-[35px] cursor-pointer"></i>
          <i class="uil uil-shopping-cart text-[35px] cursor-pointer"></i>
          <ThemeSwitcher />
          <i class="uil uil-apps text-[35px] cursor-pointer"></i>
        </div>
      </div>
      <div
        class="hidden h-[84px] w-full items-center justify-between sm:flex md:hidden"
      >
        <img src="/logo.png" alt="Frame" />
        <div class="flex items-center gap-6">
          <i class="uil uil-user text-[35px] cursor-pointer"></i>
          <i class="uil uil-shopping-cart text-[35px] cursor-pointer"></i>
          <i class="uil uil-apps text-[35px] cursor-pointer"></i>
        </div>
      </div>
      <div class="flex h-[84px] w-full items-center justify-between sm:hidden">
        <img src="/logo.png" alt="Frame" />
        <div class="flex items-center gap-6">
          <i class="uil uil-user text-[35px] cursor-pointer"></i>
          <i class="uil uil-apps text-[35px] cursor-pointer"></i>
        </div>
      </div>
    </UContainer>
  </div>
</template>
<script lang="ts" setup>
import LangSwitcher from './langSwitcher.vue';

const menuStore = useMenuStore()
</script>
