<script lang="ts">
import * as m from '$lib/paraglide/messages.js';
import type { components } from '$lib/generated/api';
import SegmentationColumn from './SegmentationColumn.svelte';
import TranscriptionColumn from './TranscriptionColumn.svelte';
import ReadyColumn from './ReadyColumn.svelte';

type TranscriptionQueueItemDTO = components['schemas']['TranscriptionQueueItemDTO'];
type TranscriptionWeeklyStatsDTO = components['schemas']['TranscriptionWeeklyStatsDTO'];

interface Props {
	segmentationDocs: TranscriptionQueueItemDTO[];
	transcriptionDocs: TranscriptionQueueItemDTO[];
	readyDocs: TranscriptionQueueItemDTO[];
	weeklyStats: TranscriptionWeeklyStatsDTO | null;
}

let { segmentationDocs, transcriptionDocs, readyDocs, weeklyStats }: Props = $props();
</script>

<section class="mt-4 rounded-sm border border-line bg-surface p-6">
	<h2 class="mb-4 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
		{m.mission_control_heading()}
	</h2>
	<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
		<SegmentationColumn docs={segmentationDocs} weeklyCount={weeklyStats?.segmentationCount ?? 0} />
		<TranscriptionColumn
			docs={transcriptionDocs}
			weeklyCount={weeklyStats?.transcriptionCount ?? 0}
		/>
		<ReadyColumn docs={readyDocs} />
	</div>
</section>
