---
import Head from "../components/Head.astro";
import Nav from "../components/Nav.astro";
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";

interface Props {
  title: string;
  description: string;
  pubDate?: Date;
  modDate?: Date;
  slug?: string;
}

const { title, description, pubDate, modDate, slug } = Astro.props;
---

<html lang="en" class="scroll-smooth" transition:animate="none">
  <Head {title} {description} />
  <body class="flex min-h-screen flex-col">
    <Nav />
    <Header {title} {pubDate} {modDate} {slug} />
    <main class="flex-1 bg-white dark:bg-neutral-800">
      <div
        class={`relative prose prose-neutral dark:prose-invert mx-auto px-4 ${pubDate ? "pt-0" : "pt-8"} pb-16 ${Astro.originPathname === "/" ? "prose-headings:scroll-mt-12" : "prose-headings:scroll-mt-24 lg:prose-headings:scroll-mt-16"} prose-h1:font-bold prose-pre:!bg-neutral-700 prose-a:font-normal prose-a:not-in-prose-headings:text-blue-800 prose-a:not-in-prose-headings:dark:text-blue-300 prose-a:hover:no-underline prose-a:active:bg-neutral-200 prose-a:active:dark:bg-neutral-700 prose-a:in-prose-headings:font-bold prose-a:in-prose-headings:decoration-2 prose-a:in-prose-headings:no-underline prose-a:in-prose-headings:hover:underline`}
      >
        <slot />
      </div>
    </main>
    <Footer />
  </body>
</html>

<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>
