<script lang="ts">
	import type { InstanceStatus, DeployStatus } from '$lib/types';

	type Status = InstanceStatus | DeployStatus | string;

	interface Props {
		status: Status;
		size?: 'sm' | 'md';
	}

	const { status, size = 'md' }: Props = $props();

	const colorMap: Record<string, string> = {
		running: 'bg-green-100 text-green-800',
		success: 'bg-green-100 text-green-800',
		stopped: 'bg-gray-100 text-gray-800',
		failed: 'bg-red-100 text-red-800',
		rolled_back: 'bg-red-100 text-red-800',
		removing: 'bg-yellow-100 text-yellow-800',
		pending: 'bg-blue-100 text-blue-800',
		pulling: 'bg-blue-100 text-blue-800',
		starting: 'bg-yellow-100 text-yellow-800',
		configuring_proxy: 'bg-yellow-100 text-yellow-800',
		health_checking: 'bg-yellow-100 text-yellow-800'
	};

	const dotColorMap: Record<string, string> = {
		running: 'bg-green-500',
		success: 'bg-green-500',
		stopped: 'bg-gray-400',
		failed: 'bg-red-500',
		rolled_back: 'bg-red-500',
		removing: 'bg-yellow-500',
		pending: 'bg-blue-500',
		pulling: 'bg-blue-500',
		starting: 'bg-yellow-500',
		configuring_proxy: 'bg-yellow-500',
		health_checking: 'bg-yellow-500'
	};

	const colorClass = $derived(colorMap[status] ?? 'bg-gray-100 text-gray-800');
	const dotClass = $derived(dotColorMap[status] ?? 'bg-gray-400');
	const sizeClass = $derived(size === 'sm' ? 'text-xs px-2 py-0.5' : 'text-sm px-2.5 py-0.5');
	const dotSize = $derived(size === 'sm' ? 'h-1.5 w-1.5' : 'h-2 w-2');
	const label = $derived(status.replace(/_/g, ' '));
</script>

<span class="inline-flex items-center gap-1.5 rounded-full font-medium {colorClass} {sizeClass}">
	<span class="rounded-full {dotClass} {dotSize}"></span>
	{label}
</span>
