<script lang="ts">
	type Phase = 'prepping' | 'simmering' | 'plating';

	interface Props {
		phase: Phase;
	}
	let { phase }: Props = $props();

	const phases: { id: Phase; label: string }[] = [
		{ id: 'prepping', label: 'Prepping' },
		{ id: 'simmering', label: 'Simmering' },
		{ id: 'plating', label: 'Plating' }
	];

	const colors: Record<Phase, string> = {
		prepping: '#FD7E14',
		simmering: '#E1306C',
		plating: '#833AB4'
	};

	const phaseIndex: Record<Phase, number> = { prepping: 0, simmering: 1, plating: 2 };
	const current = $derived(phaseIndex[phase]);
</script>

<div class="phase-track">
	{#each phases as p, i}
		{@const state = i < current ? 'done' : i === current ? 'active' : 'idle'}
		<div class="segment {state}" style={state !== 'idle' ? `--clr: ${colors[p.id]}` : ''}>
			<div class="bar"></div>
			<span class="label">{p.label}</span>
		</div>
		{#if i < phases.length - 1}
			<div class="connector {i < current ? 'done' : ''}"></div>
		{/if}
	{/each}
</div>

<style>
	.phase-track {
		display: flex;
		align-items: flex-start;
		gap: 0;
		width: 100%;
	}
	.segment {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 5px;
		flex: 1;
	}
	.bar {
		height: 5px;
		width: 100%;
		border-radius: 3px;
		background: var(--surface-2);
		transition: background 0.35s;
	}
	.segment.active .bar,
	.segment.done .bar {
		background: var(--clr);
	}
	.label {
		font-size: 10px;
		font-weight: 600;
		color: var(--ink-3);
		letter-spacing: 0.2px;
		transition: color 0.35s;
	}
	.segment.active .label {
		color: var(--clr);
	}
	.segment.done .label {
		color: var(--ink-2);
	}
	.connector {
		width: 4px;
		height: 5px;
		flex-shrink: 0;
		background: var(--surface-2);
		margin-top: 0;
		transition: background 0.35s;
	}
	.connector.done {
		background: var(--ink-3);
	}
</style>
