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

interface Props {
	availableBlocks?: number;
	totalOcrBlocks?: number;
	availableDocuments?: number;
	availableSegBlocks?: number;
}

let {
	availableBlocks = 0,
	totalOcrBlocks = 0,
	availableDocuments = 0,
	availableSegBlocks = 0
}: Props = $props();
</script>

<div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
	<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
		<div class="text-3xl font-bold text-brand-navy">{availableBlocks}</div>
		<div class="mt-2 text-xs font-bold tracking-widest text-gray-400 uppercase">
			{m.ocr_stat_training_blocks()}
		</div>
	</div>
	<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
		<div class="text-3xl font-bold text-brand-navy">{totalOcrBlocks}</div>
		<div class="mt-2 text-xs font-bold tracking-widest text-gray-400 uppercase">
			{m.ocr_stat_total_blocks()}
		</div>
	</div>
	<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
		<div class="text-3xl font-bold text-brand-navy">{availableDocuments}</div>
		<div class="mt-2 text-xs font-bold tracking-widest text-gray-400 uppercase">
			{m.ocr_stat_documents()}
		</div>
	</div>
	<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
		<div class="text-3xl font-bold text-brand-navy">{availableSegBlocks}</div>
		<div class="mt-2 text-xs font-bold tracking-widest text-gray-400 uppercase">
			{m.ocr_stat_seg_blocks()}
		</div>
	</div>
</div>
