<script lang="ts">
	const { status }: { status: string } = $props();

	const variantMap: Record<string, { label: string; variantClass: string }> = {
		draft: { label: 'Draft', variantClass: 'bg-gray-100 text-gray-800' },
		active: { label: 'Active', variantClass: 'bg-emerald-100 text-emerald-800' },
		completed: { label: 'Completed', variantClass: 'bg-blue-100 text-blue-800' },
		cancelled: { label: 'Cancelled', variantClass: 'bg-red-100 text-red-800' }
	};

	const display = $derived(variantMap[status] ?? variantMap.draft);
</script>

<span
	class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium {display.variantClass}"
>
	{display.label}
</span>
