---
import StandardLayout from '../../layouts/StandardLayout.astro';
import { getCollection } from 'astro:content';

// Get all blog posts sorted by publication date
const posts = await getCollection('blog');
posts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
---

<StandardLayout title="Blog | Astro Site" description="Read our latest blog posts">
  <div class="space-y-8">
    <h1 class="text-3xl font-bold text-gray-900">Blog</h1>
    
    <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
      {posts.map((post) => (
        <article class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
          <a href={`/blog/${post.slug}`} class="block">
            {post.data.image && (
              <img 
                src={post.data.image} 
                alt={post.data.title} 
                class="w-full h-48 object-cover"
              />
            )}
            <div class="p-6">
              <h2 class="text-xl font-semibold text-gray-900 mb-2">{post.data.title}</h2>
              <p class="text-sm text-gray-500 mb-3">
                {new Date(post.data.pubDate).toLocaleDateString('en-US', {
                  year: 'numeric',
                  month: 'long',
                  day: 'numeric'
                })}
              </p>
              <p class="text-gray-700">{post.data.description}</p>
              <p class="mt-4 text-blue-600 font-medium">Read more →</p>
            </div>
          </a>
        </article>
      ))}
    </div>
    
    {posts.length === 0 && (
      <div class="bg-white rounded-lg shadow p-6 text-center">
        <p class="text-gray-700">No blog posts found. Check back soon!</p>
      </div>
    )}
  </div>
</StandardLayout>