---
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"] & { useKatex?: boolean };

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

<!doctype html>
<html lang="en" class="dark:mocha">
	<head>
		<BaseHead title={title} description={description} image={heroImage} />
		{
			useKatex ? (
				<link
					href="https://cdn.jsdelivr.net/npm/katex@0.16.19/dist/katex.min.css"
					rel="stylesheet"
				/>
			) : null
		}
	</head>

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