---
import { getCollection } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';
import Header from '../../components/layout/Header.astro';
import Footer from '../../components/layout/Footer.astro';

const allPosts = await getCollection('blog', ({ data }) => !data.draft);
const sortedPosts = allPosts.sort(
  (a, b) => b.data.publishDate.valueOf() - a.data.publishDate.valueOf()
);
---

<BaseLayout 
  title="Blog"
  description="Thoughts on building products, technical learnings, and the indie builder journey"
>
  <Header />
  <main class="flex-1 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <h1 class="text-4xl font-bold mb-8">Blog</h1>
    
    <div class="space-y-8">
      {sortedPosts.map((post) => (
        <article class="bg-surface rounded-lg border border-text-tertiary/20 p-6 hover:border-primary/40 transition-colors">
          <a href={`/blog/${post.slug}`} class="block">
            <time class="text-sm text-text-tertiary block mb-2">
              {post.data.publishDate.toLocaleDateString('en-US', { 
                year: 'numeric', 
                month: 'long', 
                day: 'numeric' 
              })}
            </time>
            
            <h2 class="text-2xl font-semibold mb-3 text-text-primary hover:text-primary transition-colors">
              {post.data.title}
            </h2>
            
            <p class="text-text-secondary mb-4">
              {post.data.description}
            </p>
            
            <div class="flex flex-wrap gap-2 mb-4">
              {post.data.tags.map((tag) => (
                <span class="inline-block px-3 py-1 rounded-full text-sm font-medium border bg-text-tertiary/10 text-text-secondary border-text-tertiary/20">
                  {tag}
                </span>
              ))}
            </div>
            
            <span class="text-primary font-medium">Read more →</span>
          </a>
        </article>
      ))}
    </div>
    
    {sortedPosts.length === 0 && (
      <p class="text-text-secondary text-center py-12">
        No posts yet. Check back soon!
      </p>
    )}
  </main>
  <Footer />
</BaseLayout>