---
import { getCollection, render } from "astro:content";
import GameLayout from "../../layouts/GameLayout.astro";

export async function getStaticPaths() {
    const journalEntries = await getCollection("journal");
    return journalEntries.map((entry) => ({
        params: { slug: entry.id },
        props: { entry },
    }));
}

const { entry } = Astro.props;
if (!entry) return Astro.redirect("/404");

const { Content } = await render(entry);
---

<GameLayout title={entry.data.title}>
    <article class="journal-post">
        <header class="post-header">
            <a href="/" class="back-nav">← Retour au Journal</a>
            <h1>{entry.data.title}</h1>
            <p class="date">
                Chroniqué le {
                    entry.data.publishDate.toLocaleDateString("fr-FR", {
                        day: "numeric",
                        month: "long",
                        year: "numeric",
                    })
                }
            </p>

            {
                entry.data.tags && (
                    <div class="tags-row">
                        {entry.data.tags.map((tag) => (
                            <a
                                href={`/journal/tags/${tag.toLowerCase()}`}
                                class="tag-link"
                            >
                                {tag.includes(":") ? tag.split(":")[1] : tag}
                            </a>
                        ))}
                    </div>
                )
            }
        </header>

        <hr class="separator" />

        <div class="prose-content">
            <Content />
        </div>
    </article>
</GameLayout>

<style>
    .journal-post {
        background: white;
        border: 1px solid #dcd0b9;
        border-radius: 8px;
        padding: 2.5rem;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.03);
    }

    .back-nav {
        font-family: "Cinzel", serif;
        font-size: 0.8rem;
        color: #b8860b;
        text-decoration: none;
        display: block;
        margin-bottom: 1.5rem;
    }

    .post-header {
        text-align: center;
        margin-bottom: 2rem;
    }

    h1 {
        margin: 0.5rem 0;
        font-family: "Cinzel", serif;
        font-size: 2.2rem;
        color: #3a352a;
    }

    .date {
        font-style: italic;
        opacity: 0.7;
        font-size: 0.9rem;
    }
    .tags-row {
        margin-top: 1.2rem;
    }

    .separator {
        border: 0;
        height: 1px;
        background-image: linear-gradient(
            to right,
            transparent,
            #dcd0b9,
            transparent
        );
        margin: 2.5rem 0;
    }

    .prose-content {
        font-size: 1.1rem;
    }

    @media (max-width: 640px) {
        .journal-post {
            padding: 1.5rem 1rem;
            border: none;
            background: transparent;
            box-shadow: none;
        }
        h1 {
            font-size: 1.6rem;
        }
    }
</style>
