---
import BaseLayout from "../../layouts/BaseLayout.astro";
import ContentPost from "../../components/ContentPost.astro";

export async function getStaticPaths({}) {
	const allPosts = await Astro.glob("../articles/*.mdx");
	const uniqueTags = [
		...new Set(allPosts.map((post) => post.frontmatter.tags).flat()),
	];

	return uniqueTags.map((tag) => {
		const filteredPosts = allPosts.filter((post) =>
			post.frontmatter.tags.includes(tag)
		);
		return {
			params: { tag },
			props: { posts: filteredPosts },
		};
	});
}

const { tag } = Astro.params;
const { posts } = Astro.props;
---

<BaseLayout pageTitle={tag}>
	<p>Posts tagged with {tag}</p>
	<ul>
		{
			posts.map((post) => (
				<li>
					<ContentPost url={post.url} title={post.frontmatter.title} />
				</li>
			))
		}
	</ul>
</BaseLayout>
