---
import BrandLogo from '@components/ui/logos/BrandLogo.astro';
import ThemeToggleButton from '@components/buttons/ThemeToggleButton.astro';
import { NavigationLinks } from '@/config';

const pathname = new URL(Astro.request.url).pathname;
const currentPath = pathname.slice(1);
---

<header
  id="nav"
  class="fixed flex flex-wrap md:flex-nowrap md:justify-start inset-x-0 top-0 w-full z-50"
>
  <div class="bg-background absolute top-0 bottom-0 left-0 z-0 w-full h-24"/>
  <div class="bg-linear-to-b from-background to-transparent absolute top-24 bottom-0 left-0 w-full h-12 z-0"/>
  <nav
    class="nav-base relative md:flex md:items-center md:justify-between rounded-[36px] w-full px-4 mx-2 py-3 mt-4"
    aria-label="Global"
  >
    <div class="flex items-center justify-between ml-0">
      <a
        class="flex-none rounded-full h-10.5"
        href="/"
        aria-label="Brand"
      >
        <BrandLogo class="h-full w-auto rounded-full object-cover"/>
      </a>
      <div class="md:hidden mr-auto ml-4">
        <button
          type="button"
          class="hs-collapse-toggle flex items-center justify-center text-secondary text-sm font-bold hover:bg-neutral-200 dark:hover:bg-neutral-700 rounded-full transition duration-300 disabled:pointer-events-none disabled:opacity-50 h-8 w-8"
          data-hs-collapse="#navbar-collapse-with-animation"
          aria-controls="navbar-collapse-with-animation"
          aria-label="Toggle navigation"
        >
          <svg
            class="hs-collapse-open:hidden shrink-0 h-5 w-5"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <line x1="3" x2="21" y1="6" y2="6"></line>
            <line x1="3" x2="21" y1="12" y2="12"></line>
            <line x1="3" x2="21" y1="18" y2="18"></line>
          </svg>
          <svg
            class="hs-collapse-open:block shrink-0 h-5 w-5 hidden"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="md:hidden ml-2 mr-2">
        <span class="">
          <ThemeToggleButton />
        </span>
      </div>
    </div>
    <div class="flex md:flex-row items-center justify-between">
      <div
        id="navbar-collapse-with-animation"
        class="hs-collapse grow basis-full md:block transition-all duration-300 ml-2 mb-2 md:mb-0 hidden overflow-hidden md:overflow-visible"
      >
        <div class="flex flex-col md:flex-row md:items-center md:justify-end gap-x-0 md:gap-x-4 lg:gap-x-7 gap-y-4 md:gap-y-0 md:ps-7 mr-2 mt-5 md:mt-0">
          {NavigationLinks.map((item) => {
          const isActive = currentPath === (item.url === '/' ? '' : item.url.slice(1));
          return (
          <a
            href={item.url}
            class={`text-sm font-medium ${isActive ? 'text-active' : 'text-secondary hover:text-secondary-hover'}`}
          >
            {item.name}
          </a>
          );
          })}
        </div>
      </div>
      <div class="hidden md:flex ml-2">
        <span class="">
          <ThemeToggleButton />
        </span>
      </div>
    </div>
  </nav>
</header>

<script is:inline src="/vendor/preline/collapse2.1.0.min.js"></script>