@props([
    'current' => 1,
    'steps' => [
        1 => ['name' => 'Data Perusahaan', 'icon' => 'fa-building'],
        2 => ['name' => 'Data Keuangan', 'icon' => 'fa-chart-line'],
        3 => ['name' => 'Hasil Analisis', 'icon' => 'fa-check-circle']
    ],
    'completed' => []
])

<div class="step-container" x-data="{ currentStep: {{ $current }} }">
    <div class="relative flex items-center justify-between">
        @foreach($steps as $step => $info)
            @php
                $isCompleted = in_array($step, $completed) || $step < $current;
                $isCurrent = $step == $current;
                $isPending = $step > $current;
            @endphp
            
            <div class="step-item flex-1 last:flex-none">
                <!-- Step Connector Line -->
                @if(!$loop->last)
                    <div class="absolute top-5 left-1/2 w-full h-0.5 bg-gray-300 dark:bg-gray-700 -translate-y-1/2"
                         :class="{
                             'bg-green-500 dark:bg-green-600': {{ $step < $current ? 'true' : 'false' }}
                         }"></div>
                @endif
                
                <!-- Step Circle -->
                <div class="relative flex flex-col items-center group">
                    <div @class([
                        'step-circle flex items-center justify-center w-10 h-10 rounded-full border-2 transition-all duration-200',
                        'step-circle-active' => $isCurrent,
                        'step-circle-completed' => $isCompleted,
                        'step-circle-inactive' => $isPending,
                        'border-primary-500 bg-primary-500 text-white' => $isCurrent,
                        'border-green-500 bg-green-500 text-white' => $isCompleted,
                        'border-gray-300 bg-white dark:bg-gray-800 text-gray-500' => $isPending,
                    ])>
                        @if($isCompleted)
                            <i class="fas fa-check text-sm"></i>
                        @else
                            <span class="font-semibold">{{ $step }}</span>
                        @endif
                    </div>
                    
                    <!-- Step Label -->
                    <div class="mt-2 text-center">
                        <span @class([
                            'text-sm font-medium transition-colors duration-200',
                            'text-primary-600 dark:text-primary-400' => $isCurrent,
                            'text-green-600 dark:text-green-400' => $isCompleted,
                            'text-gray-500 dark:text-gray-400' => $isPending,
                        ])>
                            {{ $info['name'] }}
                        </span>
                        
                        <!-- Tooltip for mobile -->
                        <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none hidden sm:block">
                            <i class="fas {{ $info['icon'] }} mr-1"></i>
                            {{ $info['name'] }}
                        </div>
                    </div>
                    
                    <!-- Step Description (optional) -->
                    @if($info['description'] ?? false)
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400 hidden md:block">
                            {{ $info['description'] }}
                        </p>
                    @endif
                </div>
            </div>
        @endforeach
    </div>
    
    <!-- Current Step Description -->
    <div class="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
        <span class="font-medium text-primary-600 dark:text-primary-400">
            Langkah {{ $current }}:
        </span>
        {{ $steps[$current]['description'] ?? $steps[$current]['name'] }}
    </div>
</div>

@push('styles')
<style>
.step-item {
    position: relative;
}

.step-item:not(:last-child) .absolute {
    width: calc(100% - 2.5rem);
    left: 2.5rem;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .step-circle {
        width: 2rem;
        height: 2rem;
        font-size: 0.875rem;
    }
    
    .step-item:not(:last-child) .absolute {
        width: calc(100% - 2rem);
        left: 2rem;
    }
}
</style>
@endpush