---
import { getCollection } from "astro:content";
import Layout from "@/layouts/Layout.astro";
import PageTitle from "@/components/PageTitle.astro";
import Tag from "@/components/Tag.astro";

const posts = await getCollection("blog");
const filteredPosts = posts.filter((post) => !post.data.draft);
const tagsMap = new Map<string, number>();
filteredPosts.forEach((post) => {
  post.data.tags?.forEach((tag) => {
    const currentCount = tagsMap.get(tag) || 0;
    tagsMap.set(tag, currentCount + 1);
  });
});
const tags = Array.from(tagsMap.entries()).sort((a, b) =>
  a[0].localeCompare(b[0]),
);
---

<Layout title="Tags | fiatcode" description="Browse blog posts by tags">
  <PageTitle title="Tags" />
  <ul class="flex flex-wrap gap-4 mt-8">
    {
      tags?.map(([tag, count]) => (
        <li class="mb-4">
          <Tag name={tag} count={count} />
        </li>
      ))
    }
  </ul>
</Layout>
