---
import { ClientRouter } from 'astro:transitions';
import BaseHead, { type Props as HeadProps } from '../components/BaseHead.astro';
import Footer from '../components/Footer.astro';
import Header from '../components/Header.astro';
import Nav from '../components/Nav.astro';

export type Props = HeadProps & { showHeader?: boolean };

const { showHeader = true, ...head } = Astro.props;
---

<!doctype html>
<html lang="en" class="antialiased break-words">
    <head>
        <BaseHead {...head} />
        <script>
            if (localStorage.theme === 'dark') {
                document.documentElement.classList.add('dark');
            }
        </script>
        <ClientRouter />
    </head>
    <body class="bg-main text-main">
        <div class="flex flex-col min-h-screen px-4 md:px-8">
            <Nav />
            {showHeader && <Header />}
            <main class="grow w-full max-w-3xl mx-auto">
                <slot />
            </main>
            <Footer />
        </div>
    </body>
</html>
