<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',
        })
    }

    import FilterPanel from '$lib/components/ui/FilterPanel.svelte'
    import type { FilterConfig } from '$lib/components/ui/FilterPanel.svelte'

    const filters: FilterConfig[] = [
        {
            type: 'tags',
            key: 'tags',
            label: 'Schlagwörter',
            options: [
                { label: 'Siedlungsgeschichte', value: 'siedlungsgeschichte' },
                { label: 'Pécs', value: 'pecs' },
                // etc — ideally fetched dynamically
            ],
        },
        {
            type: 'date-range',
            keyFrom: 'from',
            keyTo: 'to',
            label: 'Zeitraum',
        },
    ]
</script>


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

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