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

export async function getStaticPaths() {
    const classEntries = await getCollection("classes");
    return classEntries.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="class-detail">
        <header class="post-header">
            <a href="/creation" class="back-nav">← Retour à la création</a>
            <h1>{entry.data.title}</h1>
            <p>{entry.data.description}</p>
        </header>

        <hr class="separator" />

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

<style>
    .class-detail {
        background: white;
        border: 1px solid #dcd0b9;
        border-radius: 8px;
        padding: 2.5rem;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.03);
        max-width: 800px;
        margin: 2rem auto;
    }

    .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;
    }

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

    .prose-content {
        font-size: 1.1rem;
    }
</style>
