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

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

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

<html lang="en">
	<head>
		<BaseHead title={title} description={description} image={src} />
		<style>
			article {
				width: 100%;
			}

			h1::after {
				content: "";
				display: block;
				/* width: 100%; */
				height: 2px;
				background-color: var(--primary);
				margin: 0.5rem auto;
			}

			h2::after {
				content: "";
				display: block;
				/* width: 100%; */
				height: 2px;
				background-color: var(--primary);
				margin: 0.5rem auto;
			}

			.hero-image {
				width: 100%;
			}

			.hero-image img {
				display: block;
				margin: 0 auto;
				border-radius: 12px;
			}

			.prose {
				width: 720px;
				max-width: 100%;
				margin: auto;
				padding: 1em;
				color: var(--text);
			}

			.title {
				margin-bottom: 1em;
				padding: 1em 0;
				text-align: center;
				line-height: 1;
			}

			.title h1 {
				margin: 0 0 0.5em 0;
			}

			.date {
				margin-bottom: 0.5em;
				color: var(--text);
			}
		</style>
	</head>

	<body>
		<Header />
		<Main>
			<article>
				<div class="hero-image">
					<img
						width={1020}
						height={510}
              src={src}
						alt=""
					/>
				</div>
				<div class="prose">
					<div class="title">
						<div class="date">
							<FormattedDate date={pubDate} />
						</div>
						<h1>{title}</h1>
          </div>
          <p>
          {description}
          </p>
				</div>
			</article>
		</Main>
		<Footer />
	</body>
</html>
