---
import BaseHead from '@components/BaseHead.astro'
import Footer from '@components/Footer.astro'
import Header from '@components/Header.astro'
import GoogleAnalytics from '@components/support/GoogleAnalytics.astro'
import { SITE } from '../config'

interface Props {
    title: string
    description: string
    ogImage?: any
    lang?: string
    structuredData?: object
}

const { title, description = SITE.description, ogImage, lang = 'en', structuredData } = Astro.props
const normalizeTitle = !title ? SITE.title : `${title} | ${SITE.title}`
---

<html lang={lang} class="scrollbar-hide lenis lenis-smooth scroll-pt-16">
    <head>
        <title>{normalizeTitle}</title>
        <BaseHead
            title={normalizeTitle}
            description={description}
            ogImage={ogImage}
            ogTitle={title === '' ? SITE.title : title}
            ogDescription={description}
            structuredData={structuredData}
        />
        <script is:inline>
            if (localStorage.getItem("hs_theme") === "dark"
                || (!("hs_theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
                document.documentElement.classList.add("dark");
            } else {
                document.documentElement.classList.remove("dark");
            }
        </script>
        <script is:inline src="/vendor/lenis/lenis1.0.42.min.js"></script>
        <script is:inline>
            const lenis = new Lenis();
            function raf(time) {
                lenis.raf(time)
                requestAnimationFrame(raf)
            }
            requestAnimationFrame(raf)
        </script>
        <GoogleAnalytics />
    </head>
    <body class="bg-neutral-200 selection:bg-yellow-400 selection:text-neutral-700 dark:bg-neutral-800">
        <div class="mx-auto max-w-screen-2xl px-4 sm:px-6 lg:px-8">
            <Header />
            <main>
                <slot />
            </main>
        </div>
        <Footer />
        <style>
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            html.lenis,
            html.lenis body {
                height: auto;
            }
            .lenis.lenis-smooth {
                scroll-behavior: auto !important;
            }
            .lenis.lenis-smooth [data-lenis-prevent] {
                overscroll-behavior: contain;
            }
            .lenis.lenis-stopped {
                overflow: hidden;
            }
            .lenis.lenis-scrolling iframe {
                pointer-events: none;
            }
        </style>
    </body>
</html>
