---
import { getCollection } from "astro:content";
import Layout from "@/layouts/Layout.astro";
import Header from "@/components/Header.astro";
import Breadcrumb from "@/components/Breadcrumb.astro";
import Main from "@/components/Main.astro";
import Footer from "@/components/Footer.astro";
import Tag from "@/components/Tag.astro";
import { getUniqueTags } from "@/utils/getUniqueTags";
import { useTranslations } from "@/i18n";
import config from "@/config";

const posts = await getCollection("posts", ({ data }) => !data.draft);
const tags = getUniqueTags(posts);

const locale = Astro.currentLocale ?? config.site.lang;
const t = useTranslations(locale);
---

<Layout title={`${t.pages.tagsTitle} | ${config.site.title}`}>
  <Header />

  <Breadcrumb />

  <Main pageTitle={t.pages.tagsTitle} pageDesc={t.pages.tagsDesc}>
    <ul class="flex flex-wrap gap-6">
      {tags.map(({ tag, tagName }) => <Tag {tag} {tagName} />)}
    </ul>
  </Main>

  <Footer />
</Layout>
