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

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

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

<html lang="en">
	<head>
		<BaseHead title={title} description={description} />
	</head>
	<body>
		<main>
			<Header />
			<article>
				<div class="prose">
					<div class="title">
						{updatedDate && <FormattedDate date={updatedDate} />}
						<h1>{title}</h1>
					</div>
					<slot />
				</div>
			</article>
		</main>
	</body>
</html>

<style>
	.hero-image {
		width: 100%;
	}
	.hero-image img {
		display: block;
		margin: 0 auto;
		border-radius: 12px;
		box-shadow: var(--box-shadow);
	}
	.title {
		text-align: center;
		line-height: 1;
		color: #eeeeee;
		
		time {
			font-size: 1rem;
		}
		h1 {
			color: #eeeeee;
			font-size: 2.5rem;
		}
	}
	.title h1 {
		margin: 0 0 0.5em 0;
	}
	.date {
		margin-bottom: 0.5em;
		color: rgb(var(--gray));
	}
	.last-updated-on {
		font-style: italic;
	}
</style>
