@props([
    'steps' => [],   // array of ['title', 'description', 'timestamp', 'status' => done|current|pending]
])

{{--
    Timeline (component.md) — generic vertical timeline.
    Each step: title, description?, timestamp?, status (done|current|pending).
    Usage: <x-timeline :steps="$steps" />
--}}

@php
    $dot = [
        'done'    => 'border-gov-primary bg-gov-primary text-white',
        'current' => 'border-gov-primary bg-gov-primary text-white',
        'pending' => 'border-border bg-white text-transparent dark:border-dark-border dark:bg-dark-card',
    ];
    $line = [
        'done'    => 'bg-gov-primary',
        'current' => 'bg-gradient-to-b from-gov-primary to-border dark:to-dark-border',
        'pending' => 'bg-border dark:bg-dark-border',
    ];
@endphp

<ol {{ $attributes->merge(['class' => 'relative animate-fade-in']) }}>
    @foreach ($steps as $i => $step)
        @php
            $state = $step['status'] ?? 'pending';
            $isLast = $loop->last;
            $isMuted = $state === 'pending';
        @endphp
        <li class="relative flex gap-4 {{ $isLast ? '' : 'pb-8' }}">
            {{-- Connector line (skipped on last item) --}}
            @unless ($isLast)
                <span class="absolute left-[11px] top-7 -bottom-1 w-0.5 {{ $line[$state] }}" aria-hidden="true"></span>
            @endunless

            {{-- Dot --}}
            <span class="relative z-10 mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-2 {{ $dot[$state] }}">
                @if ($state === 'done')
                    <x-icon name="check" variant="solid" class="h-3.5 w-3.5" />
                @elseif ($state === 'current')
                    <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-gov-primary opacity-60"></span>
                    <span class="relative h-2 w-2 rounded-full bg-white"></span>
                @else
                    <span class="h-2 w-2 rounded-full bg-border dark:bg-dark-border"></span>
                @endif
            </span>

            {{-- Content --}}
            <div class="-mt-0.5 min-w-0 flex-1 pb-1">
                <p class="text-sm font-semibold {{ $isMuted ? 'text-muted' : 'text-primary dark:text-dark-text' }}">
                    {{ $step['title'] ?? '' }}
                </p>
                @if (! empty($step['description']))
                    <p class="mt-0.5 text-sm {{ $isMuted ? 'text-muted' : 'text-secondary dark:text-dark-text-secondary' }}">
                        {{ $step['description'] }}
                    </p>
                @endif
                @if (! empty($step['timestamp']))
                    <p class="mt-1 text-xs text-muted">{{ $step['timestamp'] }}</p>
                @endif
            </div>
        </li>
    @endforeach
</ol>