---
import Head from "@components/Head.astro";
import Header from "@components/Header.astro";
import Footer from "@components/Footer.astro";
import SkinnyCenter from "@components/SkinnyCenter.astro";
import "@styles/global.css";

interface Props {
  title: string;
  description: string;
  image?: string;
  date?: Date;
  updated?: Date;
  tags?: Array<string>;
}

const { title, description, image, date, updated, tags } = Astro.props;
---

<!doctype html>
<html lang="en" class="overflow-y-scroll scroll-smooth subpixel-antialiased">
  <Head
    title={title}
    description={description}
    image={image}
    date={date}
    updated={updated}
    tags={tags}
  />
  <body class="bg-primary text-secondary">
    <div class="flex min-h-screen flex-col justify-start">
      <Header />
      <main>
        <SkinnyCenter>
          <slot />
        </SkinnyCenter>
      </main>
      <Footer />
    </div>
  </body>
</html>
