@props(['title', 'rows', 'empty' => 'No data yet'])

<div class="rounded-xl border border-slate-200 bg-white p-5">
    <h3 class="text-sm font-semibold text-slate-900">{{ $title }}</h3>
    <ul class="mt-4 space-y-2.5">
        @forelse($rows as $row)
            <li class="flex items-center justify-between gap-3 text-sm">
                <span class="truncate text-slate-600">{{ $row['label'] }}</span>
                <span class="shrink-0 font-semibold text-slate-900">{{ number_format($row['total']) }}</span>
            </li>
        @empty
            <li class="text-sm text-slate-400">{{ $empty }}</li>
        @endforelse
    </ul>
</div>