---
import { getCollection } from 'astro:content';
import GameLayout from '../../../layouts/GameLayout.astro';
import GoldButton from '../../../components/ui/GoldButton.astro';

export async function getStaticPaths() {
	const allPosts = await getCollection('logs');
	const allTags = [...new Set(allPosts.flatMap((post) => post.data.tags || []))];

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

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

<GameLayout title={`Logs: ${tag}`}>
	<h1>Logs avec la balise : <span class="tag-title">{tag}</span></h1>

	<div class="card-grid">
		{
			posts.map((post) => (
				<GoldButton href={`/logs/${post.slug}/`} title={post.data.title} body={`Publié le ${post.data.publishDate.toLocaleDateString('fr-FR')}`} />
			))
		}
	</div>
</GameLayout>

<style>
	.tag-title {
		color: #c89b3c;
	}
</style>