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

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

interface Props {
	documents: Document[];
}

const { documents }: Props = $props();

function isNew(doc: Document): boolean {
	return new Date(doc.createdAt).getTime() === new Date(doc.updatedAt).getTime();
}
</script>

<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
	<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
		{m.dashboard_reader_recent_docs_heading()}
	</h2>
	<ul class="flex flex-col divide-y divide-line">
		{#each documents as doc (doc.id)}
			<li class="py-3 first:pt-0 last:pb-0">
				<div class="flex items-start justify-between gap-3">
					<div class="flex min-w-0 flex-col gap-1">
						<div class="flex flex-wrap items-center gap-2">
							<a
								href="/documents/{doc.id}"
								class="text-ink-1 truncate rounded-sm font-serif text-sm transition-colors hover:text-brand-mint focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
							>
								{doc.title}
							</a>
							{#if isNew(doc)}
								<span
									class="rounded bg-brand-mint/20 px-1.5 py-0.5 font-sans text-xs font-bold tracking-wide text-brand-navy uppercase"
								>
									{m.dashboard_badge_new()}
								</span>
							{:else}
								<span
									class="text-ink-1 rounded bg-ink-3/10 px-1.5 py-0.5 font-sans text-xs font-bold tracking-wide uppercase"
								>
									{m.dashboard_badge_updated()}
								</span>
							{/if}
						</div>
						{#if doc.sender}
							<a
								href="/persons/{doc.sender.id}"
								class="font-sans text-xs text-ink-3 transition-colors hover:text-brand-mint"
							>
								{doc.sender.displayName ?? doc.sender.lastName}
							</a>
						{/if}
					</div>
					<span class="shrink-0 font-sans text-xs text-ink-3">
						{relativeTimeDe(new Date(doc.updatedAt))}
					</span>
				</div>
			</li>
		{/each}
	</ul>
</div>
