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

    let { data } = $props()
</script>

<div class="max-w-5xl mx-auto px-4 py-12">
    <h1 class="text-3xl font-semibold mb-2">{ m.persoenlichkeiten_titel() }</h1>
    <p class="text-gray-500 mb-10">{ m.persoenlichkeiten_untertitel() }</p>

    {#if data.personen.length === 0}
        <p class="text-gray-400">Keine Einträge gefunden.</p>
    {:else}
        <ul class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
            {#each data.personen as person}
                <li>
                    <a
                    href="/{getLocale()}/donauschwaben/persoenlichkeiten/{person.slug}"
                    class="block rounded border border-gray-200 hover:border-gray-400 transition p-4"
                    >
                    {#if person.bild}
                        <img
                                src={person.bild.url}
                                alt={person.name}
                                class="w-full h-48 object-cover rounded mb-3"
                        />
                    {/if}
                    <p class="text-xs text-gray-400 uppercase mb-1">{person.kategorie}</p>
                    <h2 class="text-lg font-semibold">{person.name}</h2>
                    {#if person.kurzbiografie}
                        <p class="text-sm text-gray-500 mt-1 line-clamp-3">{person.kurzbiografie}</p>
                    {/if}
                    </a>
                </li>
            {/each}
        </ul>
    {/if}
</div>