---

import Footer from '@/components/Footer.astro';
import NavBar from '@/components/NavBar/NavBar.astro';
import Base from './Base.astro';

interface Props {
  title: string;
  subtitle?: string;
  description: string;
}

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

<Base title={subtitle ? [title, subtitle] : title} description={description}>
  <slot name="head" slot="head" />
  <NavBar />
  <main id="main-content" class="mt-10 px-6 pb-24 md:mt-20 md:px-10">
    <article class="@container text-p2 sm:text-p15">
      <header
        class="mx-auto mb-10 max-w-3xl border-y border-faded-black py-10 dark:border-manila-light"
      >
        <h1
          class="mb-2 font-display text-h2 leading-tight uppercase sm:text-h15"
        >
          {title}
        </h1>
        <p>{description}</p>
      </header>
      <slot />
    </article>
  </main>
  <Footer />
</Base>
