---
import Head from '@components/Head.astro'
import Header from '@components/Header.astro'
import Footer from '@components/Footer.astro'
import { SITE } from '@consts'

type Props = {
  title: string
  description: string
}

const { title, description } = Astro.props
---

<!doctype html>
<html lang="en">
  <head>
    <Head title={`${title} | ${SITE.TITLE}`} description={description} />
  </head>
  <body
    class="box-border flex h-fit min-h-screen flex-col px-4 font-sans bg-background text-foreground antialiased gap-y-4"
  >
    <Header />
    <main class="flex-grow">
      <slot />
    </main>
    <Footer />
  </body>
</html>
