@props([
    'steps' => [],
    'editable' => null,
])

<div {{ $attributes->class(['progress-steps']) }}>
    @foreach ($steps as $step)
    <div 
        @class(['stepper-item', 'completed' => $step['completed'], 'active' => $step['active']]) 
        @if($editable) wire:click="$emit('setProgressStep', {{ $step['value'] }})" @endif
    >
        <div @class([
            'step-icon', 
            'text-' . data_get($step, 'completed_color', 'success') => $step['completed'],
            'text-' . data_get($step, 'active_color', 'primary') => $step['active']]
        )>
            <x-ui.nicon :name="$step['icon']"/>
        </div>
        <div class="step-counter">
            <x-ui.nicon :name="$step['active']
                ? data_get($step, 'active_icon', 'loader') 
                : ($step['completed']? data_get($step, 'completed_icon', 'check') : '')"
            />
        </div>
        <div class="step-name">{{ $step['label'] }}</div>
    </div>
    @endforeach
</div>