@php
    $current = $current ?? 1;
    $steps = ['Service', 'Staff', 'Time', 'Details', 'Confirm'];
@endphp

<nav class="max-w-full overflow-x-auto pb-1 booklio-scrollbar" aria-label="Booking steps">
    <div class="flex min-w-max gap-2">
        @foreach ($steps as $index => $label)
            @php($stepNumber = $index + 1)
            <div class="flex items-center gap-2 rounded-full border px-3 py-2 text-xs font-bold {{ $stepNumber <= $current ? 'border-blue-200 bg-blue-50 text-booklio-primary' : 'border-booklio-border bg-white text-booklio-muted' }}">
                <span class="flex h-5 w-5 items-center justify-center rounded-full {{ $stepNumber <= $current ? 'bg-booklio-primary text-white' : 'bg-slate-100 text-booklio-muted' }}">{{ $stepNumber }}</span>
                {{ $label }}
            </div>
        @endforeach
    </div>
</nav>