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

type IncompleteDocumentDTO = {
	id: string;
	title: string;
};

interface Props {
	incompleteDocs: IncompleteDocumentDTO[];
}

let { incompleteDocs }: Props = $props();
</script>

{#if incompleteDocs.length > 0}
	<div data-testid="dashboard-needs-metadata" class="rounded-sm border border-line bg-surface p-6">
		<h2 class="mb-4 font-sans text-xs font-bold tracking-widest text-gray-400 uppercase">
			{m.dashboard_needs_metadata_heading()}
		</h2>
		{#each incompleteDocs as doc (doc.id)}
			<div class="flex items-center border-b border-line py-2 last:border-0">
				<a
					href="/enrich/{doc.id}"
					class="font-serif text-lg text-ink hover:text-ink-2 hover:underline"
				>
					{doc.title}
				</a>
			</div>
		{/each}
		<div class="mt-4">
			<a href="/enrich" class="font-sans text-sm text-ink-2 hover:text-ink hover:underline"
				>{m.dashboard_needs_metadata_show_all()}</a
			>
		</div>
	</div>
{/if}
