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

@php
    $totalSteps = count($steps);
    $currentIndex = max(0, min((int) $current - 1, $totalSteps - 1));
    $currentLabel = is_array($steps[$currentIndex] ?? null)
        ? ($steps[$currentIndex]['label'] ?? $steps[$currentIndex]['name'] ?? '')
        : ($steps[$currentIndex] ?? '');
@endphp

<div class="installer-step-progress">
    <p class="installer-step-progress-text">
        Step <strong>{{ $current }}</strong> of <strong>{{ $totalSteps }}</strong>
        @if ($currentLabel !== '')
            &mdash; {{ $currentLabel }}
        @endif
    </p>
    <span class="installer-step-badge">{{ $currentLabel ?: 'In progress' }}</span>
</div>

<div {{ $attributes->merge(['class' => 'wizard-steps installer-wizard-steps mb-4']) }}>
    @foreach ($steps as $index => $step)
        @php
            $stepNumber = $index + 1;
            $isActive = $stepNumber === (int) $current;
            $isCompleted = $stepNumber < (int) $current;
            $label = is_array($step) ? ($step['label'] ?? $step['name'] ?? '') : $step;
            $classes = 'wizard-step';
            if ($isActive) {
                $classes .= ' active';
            }
            if ($isCompleted) {
                $classes .= ' completed';
            }
        @endphp
        <div class="{{ $classes }}" data-step="{{ $stepNumber }}" title="{{ $label }}">
            <div class="wizard-step-icon">
                <span class="wizard-step-number">{{ $stepNumber }}</span>
                <i class="bi bi-check-lg wizard-step-check"></i>
            </div>
            <div class="wizard-step-label">{{ $label }}</div>
        </div>
    @endforeach
</div>