@php
    $steps = $steps ?? [];
    $currentStep = $currentStep ?? 1;
@endphp

<div class="w-full py-4">
    <div class="flex items-center justify-center">
        @foreach($steps as $index => $step)
            @php
                $stepNumber = $index + 1;
                $isCompleted = $stepNumber < $currentStep;
                $isCurrent = $stepNumber === $currentStep;
                $isPending = $stepNumber > $currentStep;
            @endphp

            {{-- Step Circle --}}
            <div class="flex items-center">
                <div class="flex flex-col items-center">
                    <div class="relative">
                        @if($isCompleted)
                            {{-- Step completado: círculo con check verde --}}
                            <div class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center">
                                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                            </div>
                        @elseif($isCurrent)
                            {{-- Step actual: círculo con punto rojo --}}
                            <div class="w-10 h-10 rounded-full border-2 border-3ip bg-white flex items-center justify-center">
                                <div class="w-3 h-3 rounded-full bg-3ip"></div>
                            </div>
                        @else
                            {{-- Step pendiente: círculo vacío --}}
                            <div class="w-10 h-10 rounded-full border-2 border-gray-300 bg-white"></div>
                        @endif
                    </div>
                    {{-- Step Label --}}
                    <span class="mt-2 text-sm font-medium {{ $isCurrent ? 'text-gray-900' : ($isCompleted ? 'text-gray-700' : 'text-gray-400') }}">
                        {{ $step }}
                    </span>
                </div>

                {{-- Línea conectora (no mostrar después del último step) --}}
                @if($stepNumber < count($steps))
                    <div class="w-24 h-0.5  {{ $isCompleted ? 'bg-green-500' : 'bg-gray-300' }}"></div>
                @endif
            </div>
        @endforeach
    </div>
</div>