---
import '@/styles/global.css'
import '@/styles/typography.css'

import Footer from '@/components/Footer.astro'
import Head from '@/components/Head.astro'
import Header from '@/components/Header.astro'
import { ENABLE_LIGHTBOX, SITE } from '@/consts'
import { getStaticFilePath } from '@/lib/blog-helpers'
import { cn } from '@/lib/utils'
interface Props {
  class?: string
}

const { class: className } = Astro.props
---

<!doctype html>
<html
  class="bg-background text-foreground scheme-light-dark"
  lang={SITE.locale}
>
  <Head>
    <slot name="head" />
  </Head>
  <body class="flex h-fit min-h-screen flex-col gap-y-6 font-sans">
    <header
      class="bg-background/50 sticky top-0 z-50 divide-y backdrop-blur-sm xl:divide-none"
    >
      <Header />
      <slot name="subposts-navigation" />
      <slot name="table-of-contents" />
    </header>
    <main
      class={cn('w-full mx-auto flex grow flex-col gap-y-6 px-4', className)}
    >
      <slot />
    </main>
    <Footer />

    {ENABLE_LIGHTBOX && <script src={getStaticFilePath('/js/fslightbox.js')} />}
  </body>
</html>
