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

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

const { post } = Astro.props;
const { remarkPluginFrontmatter } = await render(post);

const formattedDate = dayjs(post.data.datePublished.toString()).format("MMMM DD, YYYY");
const datePublished = post.data.datePublished.toISOString();
---

<style lang="scss">
	@use "../scss/variables" as *;

	a {
		color: $colorText;
	}

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

<li>
	<article>
		<a href={`/blog/${post.id}`} lang={post.data.lang}>{post.data.title}</a>
		<div>
			<small>
				<time datetime={datePublished} lang="en">{formattedDate}</time>
				<span>•</span>
				<span>{remarkPluginFrontmatter.minutesRead}</span>
			</small>
		</div>
	</article>
</li>