<script lang="ts">
import * as m from '$lib/paraglide/messages.js';
let { ocrServiceAvailable }: { ocrServiceAvailable: boolean } = $props();
</script>

<div class="flex items-center gap-2">
	<span
		role="img"
		aria-label={ocrServiceAvailable ? m.ocr_status_online() : m.ocr_status_offline()}
		class="inline-block h-2.5 w-2.5 rounded-full {ocrServiceAvailable
			? 'bg-green-500'
			: 'bg-red-500'}"
	></span>
	<span class="text-sm font-medium {ocrServiceAvailable ? 'text-green-700' : 'text-red-700'}">
		{ocrServiceAvailable ? m.ocr_status_online() : m.ocr_status_offline()}
	</span>
</div>
