<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
import { formatDate } from '$lib/shared/utils/date';
import type { components } from '$lib/generated/api';

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

interface Props {
	item: JourneyItemView;
}

let { item }: Props = $props();

// Safe: JourneyReader filters out items where document === null before rendering this component.
const doc = $derived(item.document!);
const formattedDate = $derived(doc.documentDate ? formatDate(doc.documentDate, 'short') : null);
const ariaLabel = $derived(
	formattedDate
		? m.journey_item_open_aria({ date: formattedDate })
		: m.journey_item_open_aria_undated()
);
const hasNote = $derived(item.note != null && item.note.trim().length > 0);
</script>

<a
	href="/documents/{doc.id}"
	aria-label={ariaLabel}
	style="display: flex; min-height: 44px; flex-direction: column"
	class="flex min-h-[44px] flex-col gap-1 rounded border border-line bg-surface px-4 py-3 font-serif text-base text-ink hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
>
	<span class="font-bold">{doc.title}</span>
	{#if formattedDate}
		<span class="font-sans text-sm text-ink-3">{formattedDate}</span>
	{/if}
</a>

{#if hasNote}
	<!-- plaintext — do NOT use {@html} here -->
	<p class="mt-1 flex items-baseline gap-1 font-sans text-sm text-ink-3">
		<span aria-hidden="true">✎</span>
		{item.note}
	</p>
{/if}
