@props(['history'])

{{-- История статусов заказа. Один вид на все три места, где она показывается:
     кабинет покупателя, кабинет продавца и публичное «Отследить заказ» —
     раньше каждое показывало свой набор полей.

     Кто изменил статус и причина — по-русски и только когда есть: у ручных
     переходов причина обязательна, у обычных её нет. --}}
@if ($history->isNotEmpty())
    {{-- Вертикальная линия проходит по центру точек (левый край + 5px). Отступ
         под точку — на самих <li>, а не на <ol>: точка позиционируется от края
         li, и padding на списке сдвинул бы её прямо на текст. --}}
    <ol class="relative mt-4 space-y-4
               before:absolute before:bottom-2 before:left-[5px] before:top-2 before:w-px before:bg-[var(--color-line)]">
        @foreach ($history as $item)
            <li class="relative pl-6">
                {{-- Точка непрозрачная и сама перекрывает линию, поэтому обводка
                     под цвет фона не нужна — компонент не зависит от того, лежит
                     он на белой карточке или на фоне страницы. --}}
                <span @class([
                    'absolute left-0 top-[5px] h-[11px] w-[11px] rounded-full',
                    'bg-[var(--color-primary)]' => $loop->last,
                    'bg-[var(--color-line)]' => ! $loop->last,
                ])></span>

                <div class="flex flex-wrap items-baseline gap-x-2.5 gap-y-1">
                    <span @class([
                        'text-sm font-bold',
                        'text-[var(--color-ink)]' => $loop->last,
                        'text-[var(--color-slate)]' => ! $loop->last,
                    ])>{{ $item->to_status->label() }}</span>
                    <span class="text-xs text-[var(--color-muted)]">{{ $item->created_at?->format('d.m.Y, H:i') }}</span>
                    @if ($item->actor_type)
                        <span class="text-xs text-[var(--color-muted)]">· {{ $item->actor_type->label() }}</span>
                    @endif
                </div>

                @if ($item->reason)
                    <p class="mt-1 text-sm leading-relaxed text-[var(--color-slate)]">{{ $item->reason }}</p>
                @endif
            </li>
        @endforeach
    </ol>
@endif