<script lang="ts">
import { m } from '$lib/paraglide/messages.js';

type Doc = {
	summary?: string | null;
	transcription?: string | null;
};

let { doc }: { doc: Doc } = $props();
</script>

<div class="flex justify-center px-6 py-8">
	<div class="w-full max-w-prose space-y-8">
		{#if !doc.summary && !doc.transcription}
			<p class="font-serif text-sm text-ink-3 italic">—</p>
		{/if}

		{#if doc.summary}
			<div>
				<span class="mb-3 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
					{m.doc_label_summary()}
				</span>
				<p class="font-serif text-base leading-relaxed text-ink">{doc.summary}</p>
			</div>
		{/if}

		{#if doc.transcription}
			<div>
				<span class="mb-3 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
					{m.form_label_transcription()}
				</span>
				<p class="font-serif text-base leading-relaxed whitespace-pre-wrap text-ink">
					{doc.transcription}
				</p>
			</div>
		{/if}
	</div>
</div>
