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

<div {{ $attributes->merge(['class' => 'bv-stepper']) }} role="list" aria-label="Progress">
    @foreach($steps as $index => $step)
        @php
            $stepNumber = $index + 1;
            $state = $stepNumber < $current ? 'is-complete' : ($stepNumber === $current ? 'is-active' : '');
        @endphp
        <div class="bv-stepper__step {{ $state }}" role="listitem">
            <div class="bv-stepper__indicator" aria-current="{{ $stepNumber === $current ? 'step' : 'false' }}">
                @if($stepNumber < $current)
                    <i class="bi bi-check" aria-hidden="true"></i>
                @else
                    {{ $stepNumber }}
                @endif
            </div>
            <span class="bv-stepper__label">{{ is_array($step) ? $step['label'] : $step }}</span>
            @if(!$loop->last)
                <div class="bv-stepper__connector" aria-hidden="true"></div>
            @endif
        </div>
    @endforeach
</div>