<template>
  <div class="border-b border-border">
    <UContainer
      class="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] mx-auto"
    >
      <div class="w-full hidden xl:flex items-center justify-between h-[120px]">
        <ul class="flex items-center gap-20 whitespace-nowrap">
          <li
            v-for="(item, index) in menu.items"
            :key="index"
            class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all text-lg"
          >
            0{{ index + 1 }} <br />
            {{ item.name }}
          </li>
        </ul>
        <img src="./../public/logo.png" alt="Frame" />
        <div class="flex items-center gap-7">
          <UIcon class="w-8 h-8 cursor-pointer" name="i-heroicons-user" />
          <UIcon
            class="w-8 h-8 cursor-pointer"
            name="i-heroicons-shopping-cart"
          />
        </div>
        <ThemeSwitcher />
        <button
          class="cursor-pointer hover:bg-button-hover transition-all bg-button py-3 px-6 font-medium text-white rounded-xl"
        >
          E-shop
        </button>
      </div>
      <div
        class="w-full hidden md:flex xl:hidden items-center justify-between h-[120px]"
      >
        <img src="./../public/logo.png" alt="Frame" />
        <div class="flex items-center">
          <div class="flex items-center gap-7">
            <UIcon class="w-8 h-8 cursor-pointer" name="i-heroicons-user" />
            <UIcon
              class="w-8 h-8 cursor-pointer"
              name="i-heroicons-shopping-cart"
            />
          </div>
          <ThemeSwitcher />
          <button
            class="cursor-pointer hover:bg-button-hover transition-all bg-button py-3 px-6 font-medium text-white rounded-xl"
          >
            E-shop
          </button>
        </div>
      </div>
    </UContainer>
  </div>
</template>
<script lang="ts" setup>
const menu = {
  items: [
    {
      active: true,
      created: "2025-04-29 14:21:16.980Z",
      id: "l10y982y139ep7u",
      id_lang: "en",
      id_page: "",
      id_parent: "",
      is_default: false,
      is_root: true,
      link_rewrite: "",
      link_title: "",
      meta_description: "",
      meta_title: "",
      name: "Investice",
      page_name: "",
      position_id: 0,
      updated: "2025-05-09 08:34:06.650Z",
    },
    {
      active: true,
      created: "2025-04-29 14:21:16.980Z",
      id: "l10y982y139ep7u",
      id_lang: "en",
      id_page: "",
      id_parent: "",
      is_default: false,
      is_root: true,
      link_rewrite: "",
      link_title: "",
      meta_description: "",
      meta_title: "",
      name: "O zlotě",
      page_name: "",
      position_id: 0,
      updated: "2025-05-09 08:34:06.650Z",
    },
    {
      active: true,
      created: "2025-04-29 14:21:16.980Z",
      id: "l10y982y139ep7u",
      id_lang: "en",
      id_page: "",
      id_parent: "",
      is_default: false,
      is_root: true,
      link_rewrite: "",
      link_title: "",
      meta_description: "",
      meta_title: "",
      name: "Podnikání",
      page_name: "",
      position_id: 0,
      updated: "2025-05-09 08:34:06.650Z",
    },
    {
      active: true,
      created: "2025-04-29 14:21:16.980Z",
      id: "l10y982y139ep7u",
      id_lang: "en",
      id_page: "",
      id_parent: "",
      is_default: false,
      is_root: true,
      link_rewrite: "",
      link_title: "",
      meta_description: "",
      meta_title: "",
      name: "O Nás",
      page_name: "",
      position_id: 0,
      updated: "2025-05-09 08:34:06.650Z",
    },
    {
      active: true,
      created: "2025-04-29 14:21:16.980Z",
      id: "l10y982y139ep7u",
      id_lang: "en",
      id_page: "",
      id_parent: "",
      is_default: false,
      is_root: true,
      link_rewrite: "",
      link_title: "",
      meta_description: "",
      meta_title: "",
      name: "Kontakt",
      page_name: "",
      position_id: 0,
      updated: "2025-05-09 08:34:06.650Z",
    },
  ],
  page: 1,
  perPage: 50,
  totalItems: 14,
  totalPages: 1,
};
</script>
