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

<div class="status-timeline">
    @forelse($steps as $step)
        <div class="timeline-item {{ $loop->last ? 'timeline-last' : '' }} d-flex gap-3 {{ ($step['status'] ?? '') === 'completed' ? '' : ($step['status'] ?? '') === 'active' ? 'timeline-active' : 'timeline-pending' }}">
            <div class="timeline-marker flex-shrink-0">
                <div class="rounded-circle d-flex align-items-center justify-content-center" style="width:32px;height:32px;
                    @if(($step['status'] ?? '') === 'completed') background:#198754;color:#fff;
                    @elseif(($step['status'] ?? '') === 'active') background:#0d6efd;color:#fff;
                    @else background:#dee2e6;color:#6c757d; @endif
                ">
                    @if(($step['status'] ?? '') === 'completed')
                        <i class="bi bi-check-lg"></i>
                    @elseif(($step['status'] ?? '') === 'active')
                        <i class="bi bi-hourglass-split"></i>
                    @else
                        <i class="bi bi-circle" style="font-size:0.5rem;"></i>
                    @endif
                </div>
                @if(!$loop->last)
                    <div class="timeline-line flex-grow-1" style="width:2px;min-height:30px;
                        @if(($step['status'] ?? '') === 'completed') background:#198754; @else background:#dee2e6; @endif
                    "></div>
                @endif
            </div>
            <div class="timeline-content pb-3">
                <h6 class="mb-0 fw-semibold" style="font-size:0.85rem;">{{ $step['label'] ?? '' }}</h6>
                @if(isset($step['date']))
                    <small class="text-muted">{{ $step['date'] }}</small>
                @endif
                @if(isset($step['user']))
                    <small class="text-muted d-block">by {{ $step['user'] }}</small>
                @endif
                @if(isset($step['note']))
                    <small class="text-muted fst-italic d-block mt-1">{{ $step['note'] }}</small>
                @endif
            </div>
        </div>
    @empty
        <p class="text-muted text-center py-3">No status history available.</p>
    @endforelse
</div>