---
import type { CollectionEntry } from 'astro:content';
import BaseHead from '../components/BaseHead.astro';
import FormattedDate from '../components/FormattedDate.astro';
import SectionContainer from '../components/SectionContainer.astro';

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

const { title, description, pubDate } = Astro.props;
---
<head>
	<BaseHead title={title} description={description} />
</head>

<SectionContainer>
	<main class="flex flex-col flex-1 mb-auto break-words mt-4">
		<article>
			<h1 class="text-4xl font-extrabold">{title}</h1>
			<p class="italic">{description}</p>
			<FormattedDate date={pubDate}/>
			<div class="blog">
				<slot />
			</div>
		</article>
	</main>
</SectionContainer>