---
import BaseLayout from "@/layouts/BaseLayout.astro";
import { getCollection } from "astro:content";
import Headline from "@/components/ui/Headline.astro";
import PostItem from "@/components/blog/PostItem.astro";

export async function getStaticPaths() {
  const allPosts = await getCollection("blog");
  const posts = allPosts.filter((post) => post.data && post.data.pubDate); // Ensure published

  const tags = new Set();
  posts.forEach((post) => {
    post.data.tags?.forEach((tag) => tags.add(tag));
  });

  return Array.from(tags).map((tag) => {
    return {
      params: { tag: tag as string },
      props: {
        tag,
        posts: posts.filter((post) => post.data.tags?.includes(tag as string)),
      },
    };
  });
}

const { tag, posts } = Astro.props;

const metadata = {
  title: `Posts tagged with '${tag}'`,
  description: `Explore our articles about ${tag}.`,
};
---

<BaseLayout metadata={metadata}>
  <section class="relative px-4 py-24 sm:px-6 lg:px-8 md:py-32">
    <div class="relative mx-auto max-w-5xl">
      <Headline
        tagline="Tag"
        title={`#${tag}`}
        subtitle={`Showing ${posts.length} article${posts.length === 1 ? "" : "s"}.`}
        classes={{
          container: "mb-12 text-center",
          title:
            "font-heading mb-4 text-4xl font-bold tracking-tight text-foreground md:text-6xl capitalized",
          subtitle: "mx-auto max-w-3xl text-xl text-muted-foreground",
        }}
      />

      <div class="mb-8 text-center">
        <a href="/blog" class="text-primary hover:underline">← Back to blog</a>
      </div>

      <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
        {
          posts
            .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf())
            .map((post) => <PostItem post={post} />)
        }
      </div>
    </div>
  </section>
</BaseLayout>
