---
import type { ImageMetadata } from 'astro';
import BaseLayout from './BaseLayout.astro';
import FormattedDate from '../components/FormattedDate.astro';
import { Image } from 'astro:assets';

interface Props {
	title: string;
	description: string;
	pubDate: Date;
	updatedDate?: Date;
	heroImage?: ImageMetadata;
	category?: string;
	tags?: string[];
	readTime?: string;
}

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

<BaseLayout
	title={title}
	description={description}
	image={heroImage}
	type="article"
	publishedTime={pubDate}
	modifiedTime={updatedDate}
>
	<article>
		<a href="/blog">&larr; Back to blog</a>

		<header>
			<h1>{title}</h1>
			<p>{description}</p>
			<p>
				<FormattedDate date={pubDate} />
				{readTime && <span> • {readTime}</span>}
				{category && <span> • {category}</span>}
			</p>
			{tags && tags.length > 0 && (
				<p>
					{tags.map((tag) => (
						<span>{tag} </span>
					))}
				</p>
			)}
		</header>

		{heroImage && (
			<Image
				src={heroImage}
				alt=""
				width={1200}
				height={630}
			/>
		)}

		<div>
			<slot />
		</div>

		<footer>
			Published <FormattedDate date={pubDate} />
			{updatedDate && (
				<span> • Updated <FormattedDate date={updatedDate} /></span>
			)}
		</footer>
	</article>
</BaseLayout>
