<script lang="ts">
	import type { PageData } from './$types';

	let { data }: { data: PageData } = $props();
</script>

<svelte:head>
	<title>{data.metadata.title}</title>
</svelte:head>

<article class="mx-auto prose prose-lg max-w-4xl px-4 py-12">
	<header class="mb-8">
		<h1 class="mb-2 text-4xl font-bold">{data.metadata.title}</h1>
		<p class="text-gray-600">{data.metadata.date}</p>
	</header>

	{#if data.metadata.image}
		<div class="mb-8 -mx-4 md:mx-0">
			<img
				src={data.metadata.image}
				alt={data.metadata.title}
				class="w-full rounded-lg"
			/>
		</div>
	{/if}

	<div
		class="prose-headings:font-semibold prose-a:text-electric-violet-800 prose-a:no-underline hover:prose-a:underline"
	>
		<data.content />
	</div>
</article>
