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

<div class="mb-8">
    <div class="flex items-center justify-between">
        @foreach(['Empresa', 'Criativo', 'Datas', 'Pagamento'] as $index => $step)
            <div class="flex items-center {{ $index < 3 ? 'flex-1' : '' }}">
                <div class="flex flex-col items-center">
                    <div class="w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm
                        {{ ($index + 1) < $currentStep ? 'bg-green-500 text-white' : '' }}
                        {{ ($index + 1) == $currentStep ? 'bg-purple-600 text-white ring-4 ring-purple-200' : '' }}
                        {{ ($index + 1) > $currentStep ? 'bg-gray-300 text-gray-600' : '' }}
                    ">
                        @if(($index + 1) < $currentStep)
                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                        @else
                            {{ $index + 1 }}
                        @endif
                    </div>
                    <span class="text-xs mt-2 font-medium {{ ($index + 1) == $currentStep ? 'text-purple-600' : 'text-gray-600' }}">
                        {{ $step }}
                    </span>
                </div>

                @if($index < 3)
                    <div class="flex-1 h-1 mx-4 {{ ($index + 1) < $currentStep ? 'bg-green-500' : 'bg-gray-300' }}"></div>
                @endif
            </div>
        @endforeach
    </div>
</div>