---
import Layout from "./Layout.astro";
import BlogMeta from "../components/BlogMeta.astro";

const { post } = Astro.props;
const {
	title = "",
	description = "",
	pubDate,
	categories,
	image,
	imageAlt,
} = post.data;
---

<Layout {title} {description}>
	<p class="text-sm font-bold mb-2"><a href="/blog">← blog</a></p>
	{
		image && (
			<img
				src={image}
				alt={imageAlt || ""}
				class=" ms-4 float-end size-24 sm:size-32 rounded-sm"
			/>
		)
	}
	<div class="prose dark:prose-invert max-w-none">
		<h1>{title}</h1>
		<BlogMeta {pubDate} {categories} />
		<slot />
	</div>
</Layout>