<script lang="ts">
    import { getLocale } from '$lib/paraglide/runtime'

    let { data } = $props()
    const locale = getLocale()

    function formatDate(iso: string) {
        return new Date(iso).toLocaleDateString(locale || 'de-DE', {
            year: 'numeric',
            month: 'long',
            day: 'numeric',
        })
    }
</script>

<div class="max-w-2xl mx-auto px-4 py-12">
    <h1 class="text-3xl font-bold mb-8">Artikel</h1>

    {#if data.artikel.length === 0}
        <p class="text-gray-500">Noch keine Artikel.</p>
    {:else}
        <ul class="flex flex-col gap-10 divide-y divide-brand/80">
            {#each data.artikel as artikel}
                <li class="py-6">
                    <a href="/{locale}/artikel/{artikel.slug}" class="group block">
                        <p class="text-sm text-brand/80">{formatDate(artikel.publishedAt)}</p>
                        <h2 class="text-xl font-semibold group-hover:text-brand transition">{artikel.title}</h2>
                        {#if artikel.excerpt}
                            <p class="text-gray-600">{artikel.excerpt}</p>
                        {/if}
                    </a>
                </li>
            {/each}
        </ul>
    {/if}
</div>