---
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 class="container mx-auto px-6 py-20 max-w-4xl">
		<div class="mb-12">
			<a href="/blog" class="text-sm text-brand-accent hover:underline">&larr; Back to blog</a>
		</div>

		<header class="mb-12">
			<div class="flex items-center gap-4 text-sm text-[var(--theme-text-muted)] mb-4">
				<FormattedDate date={pubDate} />
				{readTime && (
					<>
						<span>•</span>
						<span>{readTime}</span>
					</>
				)}
				{category && (
					<>
						<span>•</span>
						<span class="text-brand-accent">{category}</span>
					</>
				)}
			</div>

			<h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">{title}</h1>

			<p class="text-xl text-[var(--theme-text-muted)]">{description}</p>

			{tags && tags.length > 0 && (
				<div class="flex flex-wrap gap-2 mt-6">
					{tags.map((tag) => (
						<span class="px-3 py-1 text-xs border border-[var(--theme-border-primary)] text-[var(--theme-text-muted)]">
							{tag}
						</span>
					))}
				</div>
			)}
		</header>

		{heroImage && (
			<div class="mb-12">
				<Image
					src={heroImage}
					alt=""
					width={1200}
					height={630}
					class="w-full border border-[var(--theme-border-primary)]"
				/>
			</div>
		)}

		<div class="prose-custom">
			<slot />
		</div>

		<footer class="mt-16 pt-8 border-t border-[var(--theme-border-primary)]">
			<div class="text-sm text-[var(--theme-text-muted)]">
				Published <FormattedDate date={pubDate} />
				{updatedDate && (
					<span> • Updated <FormattedDate date={updatedDate} /></span>
				)}
			</div>
		</footer>
	</article>
</BaseLayout>
