---
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">
	<div class="container mx-auto px-6 py-20">
		<div class="mb-12">
			<a href="/" class="text-sm text-brand-accent hover:underline">&larr; Back to home</a>
		</div>

		<h1 class="text-6xl font-bold mb-12">Blog</h1>

		<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
			{allPosts.map((post) => (
				<BlogCard
					title={post.data.title}
					description={post.data.description}
					pubDate={post.data.pubDate}
					heroImage={post.data.heroImage}
					category={post.data.category}
					tags={post.data.tags}
					href={`/blog/${post.id}/`}
					readTime={calculateReadingTime(post.body)}
				/>
			))}
		</div>
	</div>
</BaseLayout>
