<script lang="ts">
	type ColumnType = 'unassigned' | 'readyToAssign' | 'assigned';

	interface Props {
		column: ColumnType;
		count: number;
	}

	let { column, count }: Props = $props();

	function getConfig() {
		switch (column) {
			case 'unassigned':
				return {
					title: 'Unassigned',
					description: 'Click the arrow to mark as ready for assignment.',
					bgClass: 'bg-red-50 dark:bg-red-900/20',
					dotClass: 'bg-red-500',
					badgeClass: 'bg-red-500'
				};
			case 'readyToAssign':
				return {
					title: 'Ready to Assign',
					description: 'Add team members, then click the arrow to assign.',
					bgClass: 'bg-yellow-50 dark:bg-yellow-900/20',
					dotClass: 'bg-yellow-500',
					badgeClass: 'bg-yellow-500'
				};
			case 'assigned':
				return {
					title: 'Assigned',
					description: 'These services are good to go.',
					bgClass: 'bg-green-50 dark:bg-green-900/20',
					dotClass: 'bg-green-500',
					badgeClass: 'bg-green-500'
				};
		}
	}

	let config = $derived(getConfig());
</script>

<div class="border-b border-theme {config.bgClass} px-4 py-3">
	<div class="flex items-center justify-between">
		<div class="flex items-center gap-2">
			<div class="h-3 w-3 rounded-full {config.dotClass}"></div>
			<h2 class="font-semibold text-theme">{config.title}</h2>
		</div>
		<span class="rounded-full {config.badgeClass} px-2.5 py-0.5 text-sm font-semibold text-white">
			{count}
		</span>
	</div>
	<p class="mt-1 text-xs text-theme-muted">
		{config.description}
	</p>
</div>
