{{--
    Timeline Component
    Props:
      $events – array of { title, description?, date, icon?, color? }

    Usage:
      <x-utility.timeline :events="[
          ['title'=>'Order placed','date'=>'Jan 1','color'=>'primary'],
          ['title'=>'Shipped','date'=>'Jan 3','color'=>'success'],
      ]"/>
--}}
@props(['events' => []])

@php
    $colorMap = [
        'primary' => 'bg-primary-100 text-primary-600 dark:bg-primary-950 dark:text-primary-400 ring-primary-200 dark:ring-primary-900',
        'success' => 'bg-green-100 text-green-600 dark:bg-green-950 dark:text-green-400 ring-green-200 dark:ring-green-900',
        'warning' => 'bg-amber-100 text-amber-600 dark:bg-amber-950 dark:text-amber-400 ring-amber-200 dark:ring-amber-900',
        'danger'  => 'bg-red-100 text-red-600 dark:bg-red-950 dark:text-red-400 ring-red-200 dark:ring-red-900',
        'default' => 'bg-surface-100 text-surface-500 dark:bg-surface-800 dark:text-surface-400 ring-surface-200 dark:ring-surface-700',
    ];
@endphp

<ol class="relative space-y-6">
    @foreach($events as $event)
        @php
            $colorKey = $event['color'] ?? 'default';
            $cls = $colorMap[$colorKey] ?? $colorMap['default'];
        @endphp
        <li class="relative flex gap-5">
            {{-- Connector line --}}
            @unless($loop->last)
                <span class="absolute start-[1.1rem] top-8 h-full w-0.5 bg-surface-200 dark:bg-surface-700"></span>
            @endunless

            {{-- Icon bubble --}}
            <div class="relative z-10 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full ring-4 {{ $cls }}">
                @if(isset($event['icon']))
                    {!! $event['icon'] !!}
                @else
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
                    </svg>
                @endif
            </div>

            {{-- Content --}}
            <div class="flex-1 min-w-0 pt-1.5">
                <p class="text-sm font-semibold text-surface-900 dark:text-surface-100">{{ $event['title'] }}</p>
                @if(isset($event['description']))
                    <p class="mt-0.5 text-sm text-surface-500 dark:text-surface-400">{{ $event['description'] }}</p>
                @endif
                <p class="mt-1 text-xs text-surface-400 dark:text-surface-500">{{ $event['date'] }}</p>
            </div>
        </li>
    @endforeach
</ol>