---
import { getCollection } from 'astro:content';
import ArrowRight from '../../icons/ArrowRight.astro';
import BaseLayout from '../../layouts/BaseLayout.astro';
import Subscribe from '../../components/Subscribe.astro';
import { sortItemsByDateDesc, getAllTags, getPostsByTag } from '../../utils/data-utils';

const posts = (await getCollection('blog')).sort(sortItemsByDateDesc);
const tags = getAllTags(posts).sort((tagA, tagB) => {
    const postCountTagA = getPostsByTag(posts, tagA.id).length;
    const postCountTagB = getPostsByTag(posts, tagB.id).length;
    return postCountTagB - postCountTagA;
});
---

<BaseLayout
    title="Tags"
    description="Explore tag directory for easy navigation and discovery. Find a wide range of topics, articles, and insights organized by tags, making it effortless to locate the content that interests you most."
    showHeader={false}
>
    <h1 class="mb-12 text-2xl font-serif italic sm:mb-16 sm:text-4xl">All Tags</h1>
    {
        tags.map((tag) => {
            const postCount = getPostsByTag(posts, tag.id).length;
            return (
                <a class="mb-10 flex justify-between items-start gap-8 group sm:mb-12" href={`/tags/${tag.id}`}>
                    <div class="grow">
                        <h2 class="text-xl leading-tight font-serif font-medium group-hover:underline group-hover:decoration-dashed group-hover:underline-offset-4 group-hover:decoration-1 sm:text-2xl">
                            {tag.name}
                        </h2>
                        <div class="mt-1 text-sm leading-normal">
                            {postCount} {postCount === 1 ? 'post' : 'posts'}
                        </div>
                    </div>
                    <div class="hidden font-serif italic opacity-0 transition group-hover:opacity-100 sm:inline-flex sm:gap-1 sm:items-center sm:shrink-0">
                        View Tag Archive <ArrowRight class="fill-current w-4 h-4" />
                    </div>
                </a>
            );
        })
    }
    <Subscribe class="my-16 sm:my-24" />
</BaseLayout>
