---
import type { CollectionEntry } from 'astro:content';

import BaseLayout from '../layouts/BaseLayout.astro';
import FormattedDate from '../components/FormattedDate.astro';

type Props = CollectionEntry<'blog'>['data'];

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

<BaseLayout title={title} description={description}>
  <article>
    <h1 class="title">{title}</h1>
    <FormattedDate date={pubDate} />
    <slot />
  </article>
</BaseLayout>

<style>
  .title {
    font-size: 2em;
    margin: 0;
    text-align: center;
  }
</style>