---
import { metaData } from "../config";
import { Icon } from "astro-icon/components";
import ExitToApp from '@mui/icons-material/ExitToApp';

const navItems = [
  { label: "Home", href: "/" },
  { label: "Radio", href: "/radio" },
  { blockSeparator: true },
  { label: "Status", href: "https://status.boatson.boats", icon: ExitToApp },
  { label: "Git", href: "https://kode.boatson.boats", icon: ExitToApp },
  { label: "Old Site", href: "https://old.codey.lol", icon: ExitToApp },
];

const currentPath = Astro.url.pathname;
---
<script is:inline>
  toggleTheme = () => {
    console.log("Toggle!")
    const currentTheme = document.documentElement.getAttribute("data-theme");
    const newTheme = currentTheme === "dark" ? "light" : "dark";
    document.dispatchEvent(new CustomEvent("set-theme", { detail: newTheme }));
}
</script>
<nav class="w-full px-4 py-4 bg-transparent">
  <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
    <a href="/" class="text-xl font-semibold header-text whitespace-nowrap">
      {metaData.title}
    </a>

    <ul class="flex flex-wrap items-center gap-2 text-sm text-neutral-700 dark:text-neutral-300">
      {navItems.map((item, index) => {
        if (item.blockSeparator) {
          return (
            <li class="text-neutral-500 dark:text-neutral-500 px-2 select-none" aria-hidden="true">
              ‖
            </li>
          );
        }

        const isExternal = item.href?.startsWith("http");
        const isActive = item.href === currentPath;
        const nextItem = navItems[index + 1];
        const shouldShowThinBar = nextItem && !nextItem.blockSeparator;

        return (
          <>
            <li>
              <a
                href={item.href}
                class={`flex items-center gap-1 px-2 py-1 rounded-md transition-colors
                  hover:bg-neutral-200 dark:hover:bg-neutral-800
                  ${isActive ? "font-semibold underline underline-offset-4" : ""}`}
                target={isExternal ? "_blank" : undefined}
                rel={isExternal ? "noopener noreferrer" : undefined}
              >
                {item.label}
                {item.icon === ExitToApp && <ExitToApp className="w-4 h-4" client:load />}
              </a>
            </li>
            {shouldShowThinBar && (
              <li class="text-neutral-400 dark:text-neutral-600 hidden sm:inline select-none" aria-hidden="true">
                |
              </li>
            )}
          </>
        );
      })}
      <li>
        <button
          id="theme-toggle"
          aria-label="Toggle theme"
          type="button"
          class="flex items-center justify-center px-2 py-1 rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-opacity"
          onclick="toggleTheme()"
        >
          <Icon
            name="fa6-solid:circle-half-stroke"
            class="h-4 w-4 text-[#1c1c1c] dark:text-[#D4D4D4]"
          />
        </button>
      </li>
    </ul>
  </div>
</nav>