---
import BaseHead from "@/components/BaseHead.astro";
import { Footer } from "@/components/sections/footer";
import Navbar from "@/components/sections/navbar";

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

<html lang="en">
  <head>
    <BaseHead title={title} description={description} />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
      rel="stylesheet"
    />
  </head>
  <body class="h-screen antialiased">
    <Navbar client:load />
    <main>
      <section class="mx-auto max-w-2xl px-4 py-16 md:py-28 lg:py-32">
        <article class="prose prose-lg dark:prose-invert">
          <slot />
        </article>
      </section>
    </main>
    <Footer />
  </body>
</html>
