<script lang="ts">
	// The badge accepts any status string — known container / deploy /
	// site states render with a colored variant; unknown values fall
	// through to the neutral pill. Typed as plain string after the
	// legacy InstanceStatus / DeployStatus unions were retired.
	type Status = string;

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

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

	const variantMap: Record<string, string> = {
		running: 'is-running',
		success: 'is-running',
		stopped: '',
		failed: 'is-fail',
		rolled_back: 'is-fail',
		removing: 'is-warn',
		pending: 'is-info',
		pulling: 'is-info',
		starting: 'is-warn',
		configuring_proxy: 'is-warn',
		health_checking: 'is-info',
		deploying: 'is-info'
	};

	const variant = $derived(variantMap[status] ?? '');
	const label = $derived(status.replace(/_/g, ' ').toUpperCase());
</script>

<span class="forge-pill {variant}" class:sm={size === 'sm'}>
	<span class="pulse"></span>
	{label}
</span>

<style>
	.forge-pill.sm {
		padding: 0.15rem 0.45rem;
		font-size: 0.58rem;
	}
	.forge-pill.sm .pulse { width: 5px; height: 5px; }
</style>
