---
const { entry, sortedEntries } = Astro.props;
const displayDate = entry
    ? new Date(entry.data.date).toLocaleDateString("fr-FR")
    : "Aucune date";
---

<div class="card-wrapper">

    <nav class="history-nav">
        <p class="nav-title">Chronologie du Souffle</p>
        <div class="slug-list">
            {
                sortedEntries.map((e) => {
                    // ID propre pour l'URL (ex: latchimynicolas/2026-02-19)
                    // On retire l'extension .md si elle existe pour l'URL
                    const cleanId = e.id.replace(/\.md$/, "");

                    const dateLabel = new Date(e.data.date).toLocaleDateString(
                        "fr-FR",
                        {
                            day: "2-digit",
                            month: "2-digit",
                        },
                    );

                    const isActive = entry.id === e.id;

                    return (
                        <a
                            href={`/${cleanId}`}
                            class={`nav-item ${isActive ? "active" : ""}`}
                        >
                            {dateLabel}
                        </a>
                    );
                })
            }
        </div>
    </nav>

    <div class="debug-info">
        <p>Flux synchronisé : {displayDate}</p>
        <p>Source : Obsidian / Raspberry Pi 4</p>
    </div>
</div>

<style>
    .card-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px;
        margin: 50px 50px
        padding: 50px;
    }
    .history-nav {
        background: white;
        padding: 15px;
        border-radius: 12px;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
        border: 1px solid #e2e8f0;
        max-width: 320px;
        width: 100%;
    }
    .nav-title {
        font-size: 0.6rem;
        text-transform: uppercase;
        font-weight: bold;
        color: #94a3b8;
        margin-bottom: 10px;
        letter-spacing: 1px;
        text-align: center;
    }
    .slug-list {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .nav-item {
        text-decoration: none;
        font-size: 0.75rem;
        padding: 4px 8px;
        border-radius: 6px;
        background: #f1f5f9;
        color: #475569;
        transition: all 0.2s;
        font-family: monospace;
    }
    .nav-item.active {
        background: #333;
        color: white;
    }
    .debug-info {
        text-align: center;
        font-size: 0.6rem;
        color: #94a3b8;
        font-family: monospace;
        text-transform: uppercase;
    }
</style>