@props(['current' => 1])
@php
    $steps = [1 => 'Choose category', 2 => 'Your details', 3 => 'Verify'];
@endphp
<ol {{ $attributes->merge(['class' => 'flex items-center gap-2 text-sm sm:gap-4']) }} aria-label="Registration progress">
    @foreach ($steps as $n => $label)
        <li class="flex items-center gap-2 {{ $n < count($steps) ? 'flex-1' : '' }}" @if ($n === $current) aria-current="step" @endif>
            <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm font-semibold
                {{ $n < $current ? 'bg-emerald-500 text-white' : ($n === $current ? 'bg-gold-500 text-navy-900' : 'bg-white/15 text-white/70') }}">
                @if ($n < $current)
                    <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-7.5 7.5a1 1 0 01-1.4 0L3.3 9.7a1 1 0 011.4-1.4l3.8 3.8 6.8-6.8a1 1 0 011.4 0z" clip-rule="evenodd"/></svg>
                @else
                    {{ $n }}
                @endif
            </span>
            <span class="hidden truncate font-medium sm:inline {{ $n === $current ? 'text-white' : 'text-white/65' }}">{{ $label }}</span>
            <span class="sm:hidden {{ $n === $current ? 'font-medium text-white' : 'hidden' }}">{{ $label }}</span>
            @if ($n < count($steps))
                <span class="mx-1 hidden h-px flex-1 bg-white/20 sm:block" aria-hidden="true"></span>
            @endif
        </li>
    @endforeach
</ol>