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

<div class="mb-8">
    <div class="flex items-center justify-center">
        @foreach($steps as $index => $step)
            @php
                $stepNumber = $index + 1;
                $isActive = $stepNumber === $currentStep;
                $isCompleted = $stepNumber < $currentStep;
            @endphp

            {{-- Step Circle --}}
            <div class="flex flex-col items-center">
                <div class="flex items-center">
                    <div class="flex items-center justify-center w-10 h-10 rounded-full border-2
                        {{ $isCompleted ? 'bg-accent-600 border-accent-600' : '' }}
                        {{ $isActive ? 'bg-accent-600 border-accent-600' : '' }}
                        {{ !$isActive && !$isCompleted ? 'bg-white dark:bg-zinc-800 border-zinc-300 dark:border-zinc-600' : '' }}">
                        @if($isCompleted)
                            <flux:icon.check class="h-5 w-5 text-white" />
                        @else
                            <span class="text-sm font-semibold
                                {{ $isActive ? 'text-white' : 'text-zinc-500 dark:text-zinc-400' }}">
                                {{ $stepNumber }}
                            </span>
                        @endif
                    </div>
                </div>

                {{-- Step Label --}}
                <div class="mt-2 text-center">
                    <p class="text-xs font-medium
                        {{ $isActive ? 'text-accent-600 dark:text-accent-400' : 'text-zinc-500 dark:text-zinc-400' }}">
                        {{ $step }}
                    </p>
                </div>
            </div>

            {{-- Connector Line --}}
            @if(!$loop->last)
                <div class="flex-1 h-0.5 mx-4
                    {{ $stepNumber < $currentStep ? 'bg-accent-600' : 'bg-zinc-300 dark:bg-zinc-600' }}"
                    style="min-width: 60px; max-width: 120px;">
                </div>
            @endif
        @endforeach
    </div>
</div>