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

let {
	totalPersons,
	totalDocuments
}: {
	totalPersons: number;
	totalDocuments: number;
} = $props();

const personsLabel = $derived(
	totalPersons === 1 ? m.persons_stats_label_persons_one() : m.persons_stats_label_persons_many()
);
const documentsLabel = $derived(
	totalDocuments === 1
		? m.persons_stats_label_documents_one()
		: m.persons_stats_label_documents_many()
);
</script>

<div class="flex items-baseline gap-4">
	<div class="flex items-baseline gap-1.5">
		<span class="font-sans text-2xl font-black text-ink">{totalPersons}</span>
		<span class="font-sans text-[10px] font-bold tracking-widest text-ink-3 uppercase">
			{personsLabel}
		</span>
	</div>
	<span class="font-sans text-lg text-line">·</span>
	<div class="flex items-baseline gap-1.5">
		<span class="font-sans text-2xl font-black text-ink">{totalDocuments}</span>
		<span class="font-sans text-[10px] font-bold tracking-widest text-ink-3 uppercase">
			{documentsLabel}
		</span>
	</div>
</div>
