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

@php
    $muted = config('theme.colors.muted');
    $primary = config('theme.colors.primary');
    $success = config('theme.ui.severity.success');
    $text = config('theme.colors.text');
@endphp

<ul class="list-unstyled mb-0 erp-workflow-timeline">
    @foreach ($steps as $step)
        @php
            $state = $step['state'] ?? 'pending';
            $kind = $step['kind'] ?? 'approval';
            $dot =
                $state === 'done'
                    ? $success
                    : ($state === 'current' ? $primary : $muted);
            $line = $state === 'pending' ? $muted : $primary;
        @endphp
        <li class="erp-workflow-timeline__item d-flex gap-3 pb-3">
            <div class="d-flex flex-column align-items-center">
                <span
                    class="erp-workflow-timeline__dot rounded-circle"
                    style="width: 0.65rem; height: 0.65rem; background: {{ $dot }};"
                    title="{{ $kind }}"
                ></span>
                @unless ($loop->last)
                    <span class="erp-workflow-timeline__line flex-grow-1" style="width: 2px; background: {{ $line }};"></span>
                @endunless
            </div>
            <div class="min-w-0 pb-1">
                <div class="fw-semibold small" style="color: {{ $text }};">{{ $step['label'] ?? '' }}</div>
                @if (! empty($step['meta']))
                    <div class="small" style="color: {{ $muted }};">{{ $step['meta'] }}</div>
                @endif
            </div>
        </li>
    @endforeach
</ul>
