---
import Logo from "../content/TH.svg";
import Icon from "./Icon.astro";
import Button from "./Button.astro";

const routes = ["blog", "tracks"];
---

<nav class="sticky top-0 z-10 max-w-none bg-white dark:bg-neutral-800">
  <div
    class="mx-auto flex max-w-screen-lg items-center justify-between ps-4 pe-2 text-neutral-700 dark:text-neutral-300"
  >
    <a href="/" title="Home">
      <Logo width={42} height={42} />
    </a>
    <div class="flex">
      {
        routes.map((route) => (
          <Button href={`/${route}`}>
            {route
              .split(" ")
              .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
              .join(" ")}
          </Button>
        ))
      }
      <Button variant="icon" title="Toggle dark mode" class="theme-toggle">
        <Icon name="moon" class="dark:hidden" />
        <Icon name="sun" class="hidden dark:block" />
      </Button>
      <Button variant="icon" href="/rss.xml" title="RSS feed">
        <Icon name="rss" />
      </Button>
    </div>
  </div>
</nav>

<script>
  const setToggleListener = () => {
    const toggleBtn = document.querySelector(".theme-toggle");

    toggleBtn?.addEventListener("click", () => {
      const element = document.documentElement;
      element.classList.toggle("dark");

      const isDark = element.classList.contains("dark");
      localStorage.setItem("theme", isDark ? "dark" : "light");
    });
  };

  setToggleListener();

  document.addEventListener("astro:after-swap", setToggleListener);
</script>
