---
import { type CollectionEntry } from "astro:content";
import dayjs from "dayjs";

type Props = {
	readonly post: CollectionEntry<"blog">;
};

const { post } = Astro.props;
const { remarkPluginFrontmatter } = await post.render();
const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY");
---

<style lang="scss">
	@import "../scss/_variables.scss";

	a {
		color: $colorText;
		display: block;
		padding-bottom: 3rem;

		&:visited {
			color: $colorText;
		}
	}

	h2 {
		color: $colorBlossom;
		font-size: 1.25em;
		margin: 0.5em 0;
	}

	div {
		font-size: $fontSizeBase * 0.75;
		opacity: 0.5;
	}
</style>

<a href={`/blog/${post.slug}`}>
	<article>
		<div>
			<time datetime={post.data.pubDate.toISOString()}>{formattedDate}</time>
			<span>•</span>
			<span>{remarkPluginFrontmatter.minutesRead}</span>
		</div>
		<h2>{post.data.title}</h2>
		<p>{post.data.description}</p>
	</article>
</a>