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

<section class="rounded-2xl border border-slate-200 bg-white p-4 sm:p-5">
    <h3 class="text-sm font-semibold text-slate-900">Patient timeline</h3>
    <ol class="mt-3 space-y-3">
        @forelse ($events as $event)
            <li class="relative flex gap-3 pl-4 before:absolute before:left-0 before:top-1.5 before:h-2 before:w-2 before:rounded-full before:bg-sky-500">
                <div class="min-w-0 flex-1">
                    <p class="text-sm font-medium text-slate-800">{{ $event['label'] ?? '' }}</p>
                    @if (! empty($event['detail']))
                        <p class="text-xs text-slate-500">{{ $event['detail'] }}</p>
                    @endif
                </div>
                <time class="shrink-0 text-xs text-slate-400">
                    {{ isset($event['at']) ? \Illuminate\Support\Carbon::parse($event['at'])->timezone(config('app.timezone'))->format('d M H:i') : '' }}
                </time>
            </li>
        @empty
            <li class="text-sm text-slate-500">No timeline events yet.</li>
        @endforelse
    </ol>
</section>