<script lang="ts">
import * as m from '$lib/paraglide/messages.js';
import { timelineDateLabel } from './dateLabel';
import type { components } from '$lib/generated/api';

type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];

/**
 * A single archive letter on the timeline: sender → receiver, title, and a
 * precision-aware date chip, linking to the document. Names/titles are
 * OCR/import-derived — rendered via default `{...}` escaping with
 * `whitespace-pre-line` for line breaks (REQ-021); never `{@html}`.
 */
let { entry }: { entry: TimelineEntryDTO } = $props();

const dateLabel = $derived(timelineDateLabel(entry.eventDate, entry.precision, entry.eventDateEnd));
const sender = $derived(entry.senderName === '' ? m.timeline_unknown_person() : entry.senderName);
const receiver = $derived(
	entry.receiverName === '' ? m.timeline_unknown_person() : entry.receiverName
);
</script>

<!-- Box layout inline (not just utility classes) so the 44px touch target holds
     even before the stylesheet loads — an <a> is inline by default and would
     ignore min-height otherwise. WCAG 2.5.5 (REQ-020). -->
<a
	href="/documents/{entry.documentId}"
	style="display: flex; flex-direction: column; justify-content: center; min-height: 44px"
	class="rounded-sm border border-l-[3px] border-line border-l-brand-mint bg-surface px-3 py-2 shadow-sm transition-colors hover:border-brand-mint focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
>
	{#if entry.title}
		<span class="font-serif text-sm font-bold break-words whitespace-pre-line text-ink"
			>{entry.title}</span
		>
	{/if}
	<span class="mt-0.5 font-sans text-xs break-words text-ink-3">
		<span class="font-serif whitespace-pre-line">{sender}</span>
		<span aria-hidden="true">→</span>
		<span class="font-serif whitespace-pre-line">{receiver}</span>
		{#if dateLabel}
			<span data-testid="letter-date"> · {dateLabel}</span>
		{/if}
	</span>
</a>
