---
import Layout from "../../layouts/Layout.astro";
import { getCollection } from "astro:content";
import { Image } from "astro:assets";
import TagBadge from "../../components/TagBadge.astro";
import { ChevronLeft } from "@lucide/astro";
import BlogCard from "../../components/BlogCard.astro";

const blogPosts = await getCollection("blog");

// Sort by publish date, most recent first
const sortedPosts = blogPosts.sort(
  (a, b) => b.data.publishDate.getTime() - a.data.publishDate.getTime(),
);

function formatDate(date: Date) {
  return date.toLocaleDateString("en-US", {
    month: "long",
    day: "numeric",
    year: "numeric",
  });
}
---

<Layout
  title="Blog - Another Hadi"
  description="Read my latest blog posts and articles about cybersecurity, OSINT and technology."
>
  <main class="max-w-6xl mx-auto px-4 py-20">
    <!-- Header -->
    <div class="text-center mb-16">
      <h1 class="text-5xl font-bold mb-4">Blog</h1>
      <p class="text-xl text-base-content/70">
        Thoughts, insights, and tutorials on cybersecurity, OSINT, and
        technology.
      </p>
    </div>

    <!-- Back to Home -->
    <div class="mb-8">
      <a href="/" class="btn btn-ghost btn-sm">
        <ChevronLeft size={18} />
        Back to Home
      </a>
    </div>

    <!-- Blog Posts Grid -->
    {
      sortedPosts.length === 0 ? (
        <div class="text-center py-20">
          <p class="text-2xl text-base-content/60">
            No blog posts yet. Check back soon!
          </p>
        </div>
      ) : (
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {sortedPosts.map((post) => (
            <BlogCard post={post} />
          ))}
        </div>
      )
    }
  </main>
</Layout>
