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

@php
    $steps = [
        1 => 'Amount',
        2 => 'Payment method',
        3 => 'Proof & submit',
    ];
@endphp

<nav class="vpm-deposit-steps" aria-label="Deposit progress">
    @foreach ($steps as $num => $label)
        @php $isActive = $num === $step; $isDone = $num < $step; @endphp
        <div
            class="vpm-deposit-steps__item {{ $isActive ? 'vpm-deposit-steps__item--active' : '' }} {{ $isDone ? 'vpm-deposit-steps__item--done' : '' }}"
            @if ($isActive) aria-current="step" @endif
        >
            <span class="vpm-deposit-steps__num" aria-hidden="true">{{ $num }}</span>
            <span class="vpm-deposit-steps__label">{{ $label }}</span>
        </div>
        @if (! $loop->last)
            <span class="vpm-deposit-steps__line" aria-hidden="true"></span>
        @endif
    @endforeach
</nav>