@props(['items']) 
{{-- Se espera un array: [['title' => 'Creado', 'time' => '10:00 AM', 'icon' => 'fa-plus', 'color' => 'blue', 'body' => '...']] --}}

<div class="timeline timeline-inverse">
    @foreach($items as $item)
        <div>
            <i class="fas {{ $item['icon'] }} bg-{{ $item['color'] }}"></i>
            <div class="timeline-item shadow-sm">
                <span class="time"><i class="far fa-clock"></i> {{ $item['time'] }}</span>
                <h3 class="timeline-header font-weight-bold border-bottom-0">
                    {{ $item['title'] }}
                </h3>
                @if(!empty($item['body']))
                    <div class="timeline-body p-2">
                        {!! $item['body'] !!}
                    </div>
                @endif
            </div>
        </div>
    @endforeach
    <div>
        <i class="far fa-clock bg-gray"></i>
    </div>
</div>



{{-- @php
    $historial = [
        ['title' => 'Venta Creada', 'time' => $venta->created_at->diffForHumans(), 'icon' => 'fa-shopping-cart', 'color' => 'primary', 'body' => 'Usuario: '.$venta->usuario->name],
        ['title' => 'Pago Recibido', 'time' => 'Hace 5 min', 'icon' => 'fa-money-bill', 'color' => 'success', 'body' => 'Ref: 123456']
    ];
@endphp
<x-timeline :items="$historial" /> --}}