<script lang="ts">
	import { t } from 'svelte-i18n';

	interface Props {
		status: string;
	}

	let { status }: Props = $props();

	const config = $derived.by(() => {
		switch (status) {
			case 'online':
				return { color: 'var(--status-online)', ink: 'var(--status-online-ink)', cssClass: 'status-online', textKey: 'status.online' };
			case 'offline':
				return { color: 'var(--status-offline)', ink: 'var(--status-offline-ink)', cssClass: '', textKey: 'status.offline' };
			case 'degraded':
				return { color: 'var(--status-degraded)', ink: 'var(--status-degraded-ink)', cssClass: '', textKey: 'status.degraded' };
			default:
				return { color: 'var(--status-unknown)', ink: 'var(--status-unknown-ink)', cssClass: '', textKey: 'status.unknown' };
		}
	});
</script>

<span
	class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-semibold"
	style="color: {config.ink}; background: color-mix(in srgb, {config.color} 14%, transparent);"
>
	<span
		class="inline-block h-2 w-2 rounded-full {config.cssClass}"
		style="background: {config.color};"
	></span>
	<span>{$t(config.textKey)}</span>
</span>
