---
import Logo from "@/components/Logo.astro";
import menu from "@/config/menu.json";
import { IoSearch } from "react-icons/io5";

export interface ChildNavigationLink {
  name: string;
  url: string;
}

export interface NavigationLink {
  name: string;
  url: string;
  hasChildren?: boolean;
  children?: ChildNavigationLink[];
}

const { main }: { main: NavigationLink[] } = menu;
---

<header class="header pt-6">
  <nav class="navbar container">
    <!-- logo -->
    <div class="order-0">
      <Logo />
    </div>
    <!-- navbar toggler -->
    <input id="nav-toggle" type="checkbox" class="hidden" />
    <label
      id="show-button"
      for="nav-toggle"
      class="order-2 flex cursor-pointer items-center text-black md:order-1 md:hidden"
    >
      <svg class="h-6 fill-current" viewBox="0 0 20 20">
        <title>Menu Open</title>
        <path d="M0 3h20v2H0V3z m0 6h20v2H0V9z m0 6h20v2H0V0z"></path>
      </svg>
    </label>
    <label
      id="hide-button"
      for="nav-toggle"
      class="order-2 hidden cursor-pointer items-center text-black md:order-1"
    >
      <svg class="h-6 fill-current" viewBox="0 0 20 20">
        <title>Menu Close</title>
        <polygon
          points="11 9 22 9 22 11 11 11 11 22 9 22 9 11 -2 11 -2 9 9 9 9 -2 11 -2"
          transform="rotate(45 10 10)"></polygon>
      </svg>
    </label>
    <!-- /navbar toggler -->

    <ul
      id="nav-menu"
      class="navbar-nav order-3 hidden w-full md:order-1 md:flex md:w-auto"
    >
      {
        main.map((menu) => (
          <>
            {menu.hasChildren ? (
              <li class="nav-item nav-dropdown group relative cursor-pointer">
                <span class="nav-link inline-flex items-center">
                  {menu.name}
                  <svg class="h-5 w-5 fill-current" viewBox="0 0 20 20">
                    <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
                  </svg>
                </span>
                <ul class="nav-dropdown-list hidden group-hover:block md:invisible md:absolute md:block md:opacity-0 md:group-hover:visible md:group-hover:opacity-100">
                  {menu.children?.map((child) => (
                    <li class="nav-dropdown-item">
                      <a href={child.url} class="nav-dropdown-link">
                        {child.name}
                      </a>
                    </li>
                  ))}
                </ul>
              </li>
            ) : (
              <li class="nav-item">
                <a href={menu.url} class="nav-link block">
                  {menu.name}
                </a>
              </li>
            )}
          </>
        ))
      }
    </ul>
    <div class="order-1 ml-auto flex md:order-2 md:ml-0">
      <a
        class="mr-4 inline-block cursor-pointer p-2 text-xl text-dark transition hover:text-primary md:mr-0"
        href="/search"
        title="seach"
        aria-label="seach"
      >
        <IoSearch />
      </a>
    </div>
  </nav>
</header>
