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

interface Props {
	documents: number | null;
	persons: number | null;
	stories: number | null;
}

const { documents, persons, stories }: Props = $props();
</script>

<div class="hidden gap-4 sm:flex">
	<a
		href="/documents"
		class="flex min-h-[44px] flex-col items-center gap-1 rounded-sm border border-line bg-surface px-5 py-3 shadow-sm transition-colors hover:border-brand-mint focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
	>
		<span class="font-serif text-2xl font-bold text-brand-navy">{documents ?? '—'}</span>
		<span class="font-sans text-xs tracking-widest text-ink-3 uppercase"
			>{m.dashboard_reader_stats_documents()}</span
		>
	</a>

	<a
		href="/persons"
		class="flex min-h-[44px] flex-col items-center gap-1 rounded-sm border border-line bg-surface px-5 py-3 shadow-sm transition-colors hover:border-brand-mint focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
	>
		<span class="font-serif text-2xl font-bold text-brand-navy">{persons ?? '—'}</span>
		<span class="font-sans text-xs tracking-widest text-ink-3 uppercase"
			>{m.dashboard_reader_stats_persons()}</span
		>
	</a>

	<a
		href="/geschichten"
		class="flex min-h-[44px] flex-col items-center gap-1 rounded-sm border border-line bg-surface px-5 py-3 shadow-sm transition-colors hover:border-brand-mint focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
	>
		<span class="font-serif text-2xl font-bold text-brand-navy">{stories ?? '—'}</span>
		<span class="font-sans text-xs tracking-widest text-ink-3 uppercase"
			>{m.dashboard_reader_stats_stories()}</span
		>
	</a>
</div>
