---
import { getCollection } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';
import BlogCard from '../../components/BlogCard.astro';
import { SITE_TITLE } from '../../consts';
import { calculateReadingTime } from '../../utils/reading-time';

const allPosts = (await getCollection('blog')).sort(
	(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
);
---

<BaseLayout title={`Blog | ${SITE_TITLE}`} description="Blog posts and articles">
	<a href="/">&larr; Back to home</a>

	<h1>Blog</h1>

	<div>
		{allPosts.map((post) => (
			<BlogCard
				title={post.data.title}
				description={post.data.description}
				pubDate={post.data.pubDate}
				href={`/blog/${post.id}/`}
				readTime={calculateReadingTime(post.body)}
			/>
		))}
	</div>
</BaseLayout>
