---
import '@styles/main.css';
import { Flex, FlexItem } from '@components/primitives';
import { Sidebar } from '@/components/patterns';
import { Header } from '@/components/patterns';

interface Props {
  title?: string;
  description?: string;
}

const {
  title = 'Express - Node.js web application framework',
  description = 'Fast, unopinionated, minimalist web framework for Node.js',
} = Astro.props;
---

<!doctype html>
<html lang="en">
  <head>
    <!-- Theme initialization: run first to prevent FOUC -->
    <script is:inline>
      (function () {
        const theme = (() => {
          if (typeof localStorage !== 'undefined') {
            const storedTheme = localStorage.getItem('theme');
            if (storedTheme === 'dark' || storedTheme === 'light') {
              return storedTheme;
            }
          }
          if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
            return 'dark';
          }
          return 'light';
        })();
        document.documentElement.setAttribute('data-theme', theme);
      })();
    </script>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
    <link rel="icon" href="/favicon.ico" sizes="any" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />
    <meta name="description" content={description} />
    <meta name="generator" content={Astro.generator} />

    <title>{title}</title>

    <style is:inline>
      @layer base, primitives, patterns;
    </style>
  </head>
  <body>
    <Header />
    <Flex gap="8">
      <Sidebar />
      <FlexItem grow>
        <main id="main-content">
          <slot />
        </main>
      </FlexItem>
    </Flex>
  </body>
</html>
