@props(['items', 'endIcon' => 'far fa-clock', 'endColor' => 'gray'])

<div {{ $attributes->merge(['class' => 'timeline timeline-inverse modern-timeline']) }}>
    @foreach($items as $item)
        <div>
            <i class="fas {{ $item['icon'] }} bg-{{ $item['color'] }} shadow-sm"></i>
            <div class="timeline-item shadow-sm border-0 timeline-hover">
                <span class="time"><i class="far fa-clock"></i> {{ $item['time'] }}</span>
                <h3 class="timeline-header font-weight-bold border-bottom-0" style="font-size: 1rem;">
                    {{ $item['title'] }}
                </h3>
                @if(!empty($item['body']))
                    <div class="timeline-body p-2 text-muted">
                        {!! $item['body'] !!}
                    </div>
                @endif
            </div>
        </div>
    @endforeach
    <div>
        <i class="{{ $endIcon }} bg-{{ $endColor }} shadow-sm"></i>
    </div>
</div>

@pushonce('css')
<style>
    /* Modern Timeline Tweaks */
    .modern-timeline .timeline-item {
        border-radius: 0.5rem;
        background-color: #f8f9fa;
        /* Fondo muy suave */
        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s;
    }

    .timeline-hover:hover {
        transform: translateX(5px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08) !important;
        background-color: #fff;
        /* Al hover se pone blanco puro para resaltar */
        z-index: 10;
    }

    /* Línea conectora más sutil */
    .timeline::before {
        background-color: #dee2e6;
        width: 2px;
        margin-left: 5px;
    }

    /* Iconos centrados y con borde blanco para separarlos de la línea */
    .timeline>div>.fas,
    .timeline>div>.far,
    .timeline>div>.fab {
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 1rem;
        border: 3px solid #f4f6f9;
        /* Color de fondo típico de AdminLTE */
        border-radius: 50%;
    }
</style>
@endpushonce