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

const navItems = {
  "/": { name: "Home", className: "", icon: null },
  "": { name: "", className: "", icon: HorizontalRuleIcon },
  "/radio": { name: "Radio", className: "", icon: null },
  "‡": { name: "", className: "", icon: HorizontalRuleIcon },
  "https://status.boatson.boats": { name: "Status", className: "", icon: ExitToApp }
};
---

<nav class="lg:mb-16 mb-12 py-5">
  <div class="flex flex-col md:flex-row md:items-center justify-between">
    <div class="flex items-center">
      <a href="/" class="text-3xl font-semibold header-text">
        {metaData.title}
      </a>
    </div>
    <div class="flex flex-row gap-4 mt-6 md:mt-0 md:ml-auto items-center">
      {
        Object.entries(navItems).map(([path, { name, className, icon }]) => 
        {
          let isVisualSeparator = icon === HorizontalRuleIcon

          if (isVisualSeparator) {
            return (
              <HorizontalRuleIcon client:load
                                                          size="sm"
                                                          className="hr"
                                                          sx={{
                                                            color: 'inherit',
                                                          }} />
            )
          }
        return (
          <a
            href={path}
            class={`transition-all hover:text-neutral-800 dark:hover:text-neutral-200 flex align-middle relative`}>
            {name}
          </a>
        )})
      }
      <button
        id="theme-toggle"
        aria-label="Toggle theme"
        class="flex items-center justify-center transition-opacity duration-300 hover:opacity-90">
        <Icon
          name="fa6-solid:circle-half-stroke"
          class="h-[14px] w-[14px] text-[#1c1c1c] dark:text-[#D4D4D4]"
        />
      </button>
    </div>
  </div>
</nav>

<script is:inline>
  function setTheme(theme) {
    document.dispatchEvent(new CustomEvent("set-theme", { detail: theme }));
  }

  function toggleTheme() {
    const currentTheme = document.documentElement.getAttribute("data-theme");
    const newTheme = currentTheme === "dark" ? "light" : "dark";
    setTheme(newTheme);
  }

  document.addEventListener("astro:page-load", () => {
    document
      .getElementById("theme-toggle")
      .addEventListener("click", toggleTheme);
  });
</script>