<script lang="ts">
	interface Props {
		status: 'queued' | 'running' | 'paused' | 'cancelled' | 'done' | 'failed';
		spinning?: boolean;
	}

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

	const statusConfig: Record<typeof status, { bg: string; text: string; label: string }> = {
		queued: { bg: 'bg-blue-100', text: 'text-blue-800', label: 'Queued' },
		running: { bg: 'bg-yellow-100', text: 'text-yellow-800', label: 'Running' },
		paused: { bg: 'bg-orange-100', text: 'text-orange-800', label: 'Paused' },
		cancelled: { bg: 'bg-gray-100', text: 'text-gray-800', label: 'Cancelled' },
		done: { bg: 'bg-green-100', text: 'text-green-800', label: 'Done' },
		failed: { bg: 'bg-red-100', text: 'text-red-800', label: 'Failed' }
	};

	const config = $derived(statusConfig[status]);
</script>

<span
	class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {config.bg} {config.text}"
>
	{config.label}
	{#if spinning}
		<span
			class="ml-1 inline-block h-3 w-3 animate-spin rounded-full border-2 border-current border-r-transparent"
		></span>
	{/if}
</span>
