---
import Head from "@components/Head.astro";
import Header from "@components/Header.astro";
import Footer from "@components/Footer.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="scroll-smooth antialiased" transition:animate="none">
  <Head
    title={title}
    description={description}
    image={image}
    date={date}
    updated={updated}
    tags={tags}
  />
  <body
    class="text-secondary items bg-primary mx-auto my-0 flex w-full max-w-[65ch] flex-col justify-start gap-6 p-4 md:my-6"
  >
    <Header />
    <main transition:animate="fade" class="flex flex-col gap-6">
      <slot />
    </main>
    <Footer />
  </body>
</html>
