<script lang="ts">
    import { getLocale } from '$lib/paraglide/runtime'
    import { m } from '$lib/paraglide/messages.js'
    import LexicalRenderer from '$lib/components/ui/LexicalRenderer.svelte';
    import type { NeuigkeitenPostFull } from '$lib/types/neuigkeiten'

    let { data }: { data: { post: NeuigkeitenPostFull } } = $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">
    <a href="/{locale}/neuigkeiten" class="text-sm text-brand hover:text-[#0f4f70] transition mb-8 block">← {m.back()}</a>

    <h1 class="text-4xl font-bold mb-2">{data.post.title}</h1>
    <p class="text-gray-400 text-sm mb-8">{formatDate(data.post.publishedAt)}</p>

    {#if data.post.featuredImage}
        <figure class="mb-8">
            <img
                    src={data.post.featuredImage.url}
                    alt={data.post.featuredImage.alt ?? data.post.title}
                    class="w-full"
            />
        </figure>
    {/if}

    <article class="prose-lg max-w-none">
        <LexicalRenderer nodes={data.post.content.root.children} />
    </article>
</div>