---

import type { ImageMetadata } from 'astro';
import Footer from '@/components/Footer.astro';
import FooterEasterEgg from '@/components/FooterEasterEgg.astro';
import NavBar from '@/components/NavBar/NavBar.astro';
import Base from './Base.astro';

interface Props {
  title: string | string[];
  description: string;
  canonical?: string;
  image?: ImageMetadata | string;
  twitterImage?: ImageMetadata | string;
}

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

<Base
  title={title}
  description={description}
  canonical={canonical}
  image={image}
  twitterImage={twitterImage}
>
  <slot name="head" slot="head" />
  <div class="flex min-h-screen flex-col">
    <NavBar />
    <main id="main-content" class="mt-10 px-6 pb-20 md:mt-20 md:px-10 md:pb-30">
      <slot />
    </main>
    <Footer class="mt-auto" />
  </div>
  <FooterEasterEgg />
</Base>
