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

<div class="w-full mb-8">
    <div class="flex items-center justify-between relative">
        <!-- Connecting Line Background -->
        <div class="absolute left-0 top-1/2 transform -translate-y-1/2 w-full h-1 bg-gray-200 rounded-full z-0"></div>
        
        <!-- Active Progress Bar -->
        <div class="absolute left-0 top-1/2 transform -translate-y-1/2 h-1 bg-[#6c2bd9] rounded-full z-0 transition-all duration-300"
             style="width: {{ (($currentStep - 1) / 3) * 100 }}%"></div>

        <!-- Step 1 -->
        <div class="relative z-10 flex flex-col items-center">
            <div class="w-9 h-9 rounded-full flex items-center justify-center text-xs font-bold transition-all {{ $currentStep >= 1 ? 'bg-[#6c2bd9] text-white ring-4 ring-purple-100 shadow-md' : 'bg-gray-200 text-gray-500' }}">
                1
            </div>
            <span class="text-[10px] font-bold uppercase tracking-wider mt-1.5 {{ $currentStep >= 1 ? 'text-purple-900' : 'text-gray-400' }}">Business</span>
        </div>

        <!-- Step 2 -->
        <div class="relative z-10 flex flex-col items-center">
            <div class="w-9 h-9 rounded-full flex items-center justify-center text-xs font-bold transition-all {{ $currentStep >= 2 ? 'bg-[#6c2bd9] text-white ring-4 ring-purple-100 shadow-md' : 'bg-gray-200 text-gray-500' }}">
                2
            </div>
            <span class="text-[10px] font-bold uppercase tracking-wider mt-1.5 {{ $currentStep >= 2 ? 'text-purple-900' : 'text-gray-400' }}">Admin</span>
        </div>

        <!-- Step 3 -->
        <div class="relative z-10 flex flex-col items-center">
            <div class="w-9 h-9 rounded-full flex items-center justify-center text-xs font-bold transition-all {{ $currentStep >= 3 ? 'bg-[#6c2bd9] text-white ring-4 ring-purple-100 shadow-md' : 'bg-gray-200 text-gray-500' }}">
                3
            </div>
            <span class="text-[10px] font-bold uppercase tracking-wider mt-1.5 {{ $currentStep >= 3 ? 'text-purple-900' : 'text-gray-400' }}">Plan</span>
        </div>

        <!-- Step 4 -->
        <div class="relative z-10 flex flex-col items-center">
            <div class="w-9 h-9 rounded-full flex items-center justify-center text-xs font-bold transition-all {{ $currentStep >= 4 ? 'bg-[#6c2bd9] text-white ring-4 ring-purple-100 shadow-md' : 'bg-gray-200 text-gray-500' }}">
                4
            </div>
            <span class="text-[10px] font-bold uppercase tracking-wider mt-1.5 {{ $currentStep >= 4 ? 'text-purple-900' : 'text-gray-400' }}">Ready</span>
        </div>
    </div>
</div>