---
import Layout from '../../layouts/Layout.astro';
import {getCollection} from "astro:content";
import ArticleList from "../../components/ArticleList.astro";

export async function getStaticPaths() {
    const allPosts = await getCollection('posts');
    // Get all categories, ensuring the default 'uncategorized' is used when categories is undefined
    const uniqueCategories = [...new Set(allPosts.map((post: any) =>
        post.data.categories || ['uncategorized']).flat())];

    return uniqueCategories.map((category) => {
        const filteredPosts = allPosts.filter((post: any) =>
            (post.data.categories || ['uncategorized']).includes(category));
        return {
            params: { category },
            props: { posts: filteredPosts },
        };
    });
}

const { category } = Astro.params;

const { posts } = Astro.props;
---
<Layout title={`posts tagged with ${category}`} description={`Posts tagged with ${category}`}>
    <h1 class="title">ls ~/blog | grep "{category}"</h1>
    <ul>
        <ArticleList posts={posts} displayDate={true} />
    </ul>
</Layout>

