---
import { Moon, Sun } from "@lucide/astro";
import Nav from "./nav.astro";
---

<header class:list={["m-3 flex justify-between lg:justify-end items-center"]}>
  <Nav className="lg:hidden block" isMobile={true} />

  <button
    type="button"
    id="theme-selector"
    class="p-2 rounded-lg hover:scale-105 transition-all ease-in-out duration-300 hover:cursor-pointer"
  >
    <span class="sr-only">
      Enable <span class="dark:hidden">light</span><span class="hidden"
        >dark</span
      > mode
    </span>
    <Moon class="hidden dark:block w-6 h-6" />
    <Sun class="block dark:hidden w-6 h-6" />
  </button>
</header>

<script>
  document.addEventListener("click", (e) => {
    const target = e.target as HTMLElement | null;
    if (!target?.closest("#theme-selector")) return;

    if (document.documentElement.classList.contains("dark")) {
      localStorage.theme = "light";
      document.documentElement.classList.remove("dark");
    } else {
      localStorage.theme = "dark";
      document.documentElement.classList.add("dark");
    }
  });
</script>