@props([
    // array of ['label' => string, 'state' => pending|running|done|failed]
    'steps' => [],
])
<ol class="space-y-0">
    @foreach ($steps as $i => $step)
        @php
            $state = $step['state'] ?? 'pending';
            $isLast = $loop->last;
            $dot = [
                'done'    => 'bg-success border-success',
                'running' => 'bg-info border-info animate-pulse',
                'failed'  => 'bg-danger border-danger',
                'pending' => 'bg-surface border-line-strong',
            ][$state] ?? 'bg-surface border-line-strong';
            $labelTone = $state === 'pending' ? 'text-muted' : 'text-ink';
        @endphp
        <li class="flex gap-3">
            <div class="flex flex-col items-center">
                <span class="mt-1 size-3 shrink-0 rounded-pill border-2 {{ $dot }}" aria-hidden="true"></span>
                @unless ($isLast)
                    <span class="w-px flex-1 bg-line" aria-hidden="true"></span>
                @endunless
            </div>
            <div class="pb-4">
                <p class="text-sm font-medium {{ $labelTone }}">{{ $step['label'] }}</p>
                <p class="text-xs text-faint">{{ __('dashboard.step_state.'.$state) }}</p>
            </div>
        </li>
    @endforeach
</ol>