---
import { getCollection } from 'astro:content';
import { Card, CardContent, CardDescription, CardHeader } from "@/components/ui/card";

// Fetch all blog posts from the content collection
const posts = await getCollection('blog');

// Sort posts by date (newest first)
const sortedPosts = posts.sort((a, b) => 
  new Date(b.data.publishDate).getTime() - new Date(a.data.publishDate).getTime()
);

const dateFormatter = new Intl.DateTimeFormat('en-GB', {
    day: '2-digit',
    month: 'long',
    year: 'numeric',
});
---

<div class="w-full max-w-2xl mx-auto p-4">
    <h1 class="text-3xl font-bold mb-8">Blog Posts</h1>
    <div class="space-y-4 max-h-96 overflow-y-auto">
        {sortedPosts.map((post) => (
            <a href={`/posts/${post.id}`} class="block hover:opacity-80 transition-opacity">
                <Card>
                    <CardHeader>
                        <h2 class="font-heading text-sm font-medium" transition:name={`post-title-${post.id}`}>{post.data.title}</h2>
                        <CardDescription>{post.data.description}</CardDescription>
                    </CardHeader>
                    <CardContent>
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>{dateFormatter.format(post.data.publishDate)}</span>
                            <span>by {post.data.author}</span>
                        </div>
                    </CardContent>
                </Card>
            </a>
        ))}
    </div>
</div>