<div class="fi-timeline">
    @php
        $events = $entry->getState() ?? [];
    @endphp

    @forelse ($events as $event)
        @php
            [$icon, $node, $ring] = \App\Filament\Support\Timeline::classesFor($event['type'] ?? 'info');
            $date = $event['date'] ?? null;
            $detail = collect([
                $event['reference'] ?? null,
                $event['method'] ?? null,
            ])->filter()->implode(' · ');
        @endphp

        <div class="fi-timeline-row">
            <div class="fi-timeline-node {{ $ring }}">
                <x-filament::icon :icon="$icon" class="fi-timeline-node-icon {{ $node }} h-4 w-4 text-white" />
            </div>

            <div class="fi-timeline-body">
                <div class="fi-timeline-label">
                    {{ $event['label'] ?? '' }}
                </div>

                <div class="fi-timeline-meta">
                    <span class="fi-timeline-date">{{ $date }}</span>
                    @if ($detail !== '')
                        <span class="fi-timeline-detail">{{ $detail }}</span>
                    @endif
                </div>
            </div>

            @if (array_key_exists('amount', $event) && $event['amount'] !== null)
                <div class="fi-timeline-amount">
                    {{ 'Rs. '.number_format((float) $event['amount'], 2) }}
                </div>
            @endif
        </div>
    @empty
        <p class="fi-timeline-empty">No activity recorded yet.</p>
    @endforelse
</div>