---
import { getAllPosts, getUniqueCategoriesWithCount } from "@/data/post";
import PageLayout from "@/layouts/Base.astro";

const allPosts = await getAllPosts();
const allCategories = getUniqueCategoriesWithCount(allPosts);

const meta = {
	description: "A list of all the categories I've written about in my posts",
	title: "All Categories",
};
---

<PageLayout meta={meta}>
	<h1 class="title mb-6">Categories</h1>
	<ul class="space-y-4">
		{
			allCategories.map(([item, val]) => (
				<li class="flex items-center gap-x-2">
					<a
						class="cactus-link inline-block"
						data-astro-prefetch
						href={`/categories/${item}/`}
						title={`View posts with the category: ${item}`}
					>
						&#35;{item}
					</a>
					<span class="inline-block">
						- {val} Post{val > 1 && "s"}
					</span>
				</li>
			))
		}
	</ul>
</PageLayout>