@props(['steps' => [], 'currentStep' => 1])

<div class="flex items-center w-full">
    @foreach($steps as $index => $step)
        @php
            $stepNum = $index + 1;
            $isCompleted = $stepNum < $currentStep;
            $isActive = $stepNum === $currentStep;
        @endphp

        {{-- Step circle + line --}}
        <div class="flex items-center flex-1">
            <div class="flex flex-col items-center">
                <div class="h-8 w-8 rounded-full flex items-center justify-center text-sm font-semibold border-2 transition-colors {{ $isCompleted ? 'bg-primary-600 border-primary-600 text-white' : ($isActive ? 'bg-white dark:bg-slate-800 border-primary-600 text-primary-600' : 'bg-white dark:bg-slate-800 border-slate-300 dark:border-slate-600 text-slate-400') }}">
                    @if($isCompleted)
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    @else
                        {{ $stepNum }}
                    @endif
                </div>
                <span class="text-xs mt-1.5 {{ $isActive ? 'text-primary-600 dark:text-primary-400 font-semibold' : ($isCompleted ? 'text-slate-700 dark:text-slate-300' : 'text-slate-400 dark:text-slate-500') }} whitespace-nowrap">{{ $step['label'] ?? '' }}</span>
            </div>
            @if(!$loop->last)
                <div class="flex-1 h-0.5 mx-2 mb-5 {{ $isCompleted ? 'bg-primary-600' : 'bg-slate-200 dark:bg-slate-700' }}"></div>
            @endif
        </div>
    @endforeach
</div>