---
import FormattedDate from '@components/base/FormattedDate.astro';
import '@styles/blog.css';
import type { CollectionEntry } from 'astro:content';
import Layout from './Layout.astro';

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

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

<Layout title={title} description={description}>
	<article>
		<div class="hero-image">
			{heroImage && <img width={1020} height={510} src={heroImage} alt="Hero Image"/>}
		</div>
		<div class="prose">
			<div class="title">
				<div class="date">
					<FormattedDate date={pubDate}/>
					{
						updatedDate && (
							<div class="last-updated-on">
								Last updated on <FormattedDate date={updatedDate}/>
							</div>
						)
					}
				</div>
				<h1>{title}</h1>
				<hr/>
			</div>
			<slot/>
		</div>
	</article>
</Layout>