@php
    $progress = $progress ?? [];
    $steps = $progress['steps'] ?? [];
@endphp

<div class="w-full">
    <div class="mb-2 flex items-center justify-between gap-2">
        <p class="text-sm font-medium text-slate-800">{{ $progress['staff_label'] ?? '' }}</p>
        @if(!empty($showPercent))
            <span class="text-xs text-slate-500">{{ $progress['percent'] ?? 0 }}%</span>
        @endif
    </div>
    <div class="flex items-center gap-1 overflow-x-auto pb-1">
        @foreach($steps as $index => $step)
            @php
                $dotClass = match($step['state'] ?? '') {
                    'complete' => 'bg-emerald-500',
                    'current' => 'bg-primary ring-4 ring-primary/20',
                    'terminal-positive' => 'bg-emerald-600',
                    'terminal-negative' => 'bg-rose-500',
                    default => 'bg-slate-200',
                };
                $lineClass = in_array($step['state'] ?? '', ['complete', 'terminal-positive'], true) ? 'bg-emerald-300' : 'bg-slate-200';
            @endphp
            <div class="flex min-w-0 flex-1 items-center">
                <div class="flex flex-col items-center gap-1 min-w-[3.5rem] mt-2">
                    <span class="h-2.5 w-2.5 shrink-0 rounded-full {{ $dotClass }}"></span>
                    <span class="max-w-[4.5rem] truncate text-center text-[10px] font-medium text-slate-600">{{ $step['label'] }}</span>
                </div>
                @if($index < count($steps) - 1)
                    <div class="mx-0.5 h-0.5 flex-1 {{ $lineClass }}"></div>
                @endif
            </div>
        @endforeach
    </div>
</div>