---
import Layout from "../layouts/Layout.astro";
import { getCollection, type CollectionEntry } from "astro:content";
import PostCard from "../components/PostCard.astro";

// Get all posts from the content collection
const posts = await getCollection("posts");

// Sort posts by date, newest first
const sortedPosts = posts.sort(
  (a: CollectionEntry<"posts">, b: CollectionEntry<"posts">) =>
    new Date(b.data.pubDate).valueOf() - new Date(a.data.pubDate).valueOf(),
);
---

<Layout>
  <div class="min-h-screen p-4 sm:p-8">
    <h1
      class="text-3xl sm:text-4xl font-bold text-primary mb-6 sm:mb-8 text-center"
    >
      Posts
    </h1>
    <div
      class="flex flex-row flex-wrap justify-center gap-4 sm:gap-6 max-w-6xl mx-auto"
    >
      {sortedPosts.map((post) => (
        <PostCard post={post} />
      ))}
    </div>

    {
      sortedPosts.length === 0 && (
        <p class="text-center text-gray-500 mt-12">
          No posts available yet. Check back soon!
        </p>
      )
    }
  </div>
</Layout>