---
// [tag].astro
import { getCollection } from "astro:content";
import GameLayout from "../../../layouts/GameLayout.astro";

export async function getStaticPaths() {
    const allPosts = await getCollection("journal");
    const tags = [...new Set(allPosts.flatMap((p) => p.data.tags || []))];
    return tags.map((tag) => ({
        params: { tag: tag.toLowerCase() },
        props: {
            posts: allPosts.filter((p) => p.data.tags?.includes(tag)),
            originalTag: tag,
        },
    }));
}
const { posts, originalTag } = Astro.props;
---

<GameLayout title={`Archive : ${originalTag}`}>
    <div class="tag-page-container">
        <a href="/" class="back-link">← Retour au Journal</a>

        <div class="tag-header">
            <h1>
                Récits marqués : <span
                    >{
                        originalTag.includes(":")
                            ? originalTag.split(":")[1]
                            : originalTag
                    }</span
                >
            </h1>
        </div>

        <div class="card-grid">
            {
                posts.map((post) => (
                    <a href={`/journal/${post.id}/`} class="gold-button">
                        <div class="title">{post.data.title}</div>
                        <p class="body">
                            Chronique du{" "}
                            {new Date(post.data.publishDate).toLocaleDateString(
                                "fr-FR",
                            )}
                        </p>
                    </a>
                ))
            }
        </div>
    </div>
</GameLayout>

<style>
    /* Tes styles spécifiques au conteneur restent inchangés */
    .tag-page-container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 2rem 1rem;
    }
    .back-link {
        color: var(--color-gold-dark);
        text-decoration: none;
        font-family: "Cinzel", serif;
        font-size: 0.9rem;
    }
    .tag-header h1 {
        font-size: 1.8rem;
        margin: 1.5rem 0 3rem;
    }
    .tag-header span {
        color: var(--color-gold);
    }
    .card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 2rem;
    }
</style>
