---
import type { CollectionEntry } from "astro:content";
import BaseHead from "../components/BaseHead.astro";
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
import FormattedDate from "../components/FormattedDate.astro";

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

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

<!doctype html>
<html lang="en" class="latte dark:mocha">
	<head>
		<BaseHead title={title} description={description} image={heroImage} />
	</head>

	<body class="bg-base text-text max-w-prose m-auto p-8">
		<Header />
		<main class="py-10">
			<article>
				<div class="prose dark:prose-invert">
					<div>
						<div class="opacity-60">
							<FormattedDate date={pubDate} />
							{
								updatedDate && (
									<div>
										Last updated on
										<FormattedDate date={updatedDate} />
									</div>
								)
							}
						</div>
						<h1 class="m-0 mt-4">{title}</h1>
						<hr />
					</div>
					<slot />
				</div>
			</article>
		</main>
		<hr class="py-4" />
		<Footer />
	</body>
</html>
