---
import LanguagePicker from "../components/LanguagePicker.astro";
import { AstroFont } from "astro-font";
import Nav from "../components/Nav.astro";
interface Props {
  title: string;
  width?: "full" | "compact";
}

const { title, width = "compact" } = Astro.props;
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="Astro description" />
    <meta name="viewport" content="width=device-width" />
    <meta name="props" content={JSON.stringify(Astro.props)} />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <AstroFont
      config={[
        {
          name: "Nunito Sans",
          src: [
            {
              style: "light",
              weight: "300",
              path: "/fonts/nunito-v26-latin-300.woff2",
            },
          ],
          preload: true,
          display: "swap",
          selector: "body",
          fallback: "sans-serif",
        },
        {
          name: "Roboto",
          src: [
            {
              weight: "300",
              style: "normal",
              path: "/fonts/roboto-v30-latin-300.woff2",
            },
          ],
          preload: true,
          display: "swap",
          selector: "body > span",
          fallback: "serif",
        },
      ]}
    />
    <link rel="stylesheet" href="/app.css" />
    <meta name="generator" content={Astro.generator} />
    <!-- <meta http-equiv="refresh" content="0;url=/" /> -->
    <title>{title}</title>
    <script>
      (function () {
        try {
          var mode = localStorage.getItem("mode");
          var supportDarkMode =
            window.matchMedia("(prefers-color-scheme: dark)").matches === true;
          if (!mode && supportDarkMode)
            document.documentElement.classList.add("dark");
          if (!mode) return;
          document.documentElement.classList.add(mode);
        } catch (e) {}
      })();
    </script>
  </head>
  <body class=`layout-${width} bg-dark text-neutral p-2`>
    <header>
      <Nav />
    </header>
    <main id="main-content" class="flex flex-col mt-4xl gap-y-2xl">
      <slot />
    </main>
    <LanguagePicker />
    <style>
      .layout-compact {
        max-width: 600px;
        margin: 0 auto;
      }
    </style>
  </body>
</html>
