@props([
    'title',
    'date' => null,
    'note' => null,
    'isCurrent' => false,
    'isFailed' => false,
    'actor' => null,
])

<li class="timeline-item {{ $isCurrent ? 'is-current' : '' }} {{ $isFailed ? 'is-failed' : '' }}">
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-1 mb-1">
        <p class="font-bold text-navy-900">{{ $title }}</p>
        @if($date)
            <span class="text-xs text-navy-500">{{ $date }}</span>
        @endif
    </div>
    @if($actor)
        <p class="text-xs text-navy-500">بواسطة: {{ $actor }}</p>
    @endif
    @if($note)
        <p class="text-sm text-navy-700 mt-1.5 leading-relaxed">{{ $note }}</p>
    @endif
    {{ $slot ?? '' }}
</li>