@props(['categories', 'total'])

@php use App\Support\Money; @endphp

{{-- Expenses by category: one series, one hue, largest first, value at the bar tip. --}}
<div {{ $attributes->class('card p-4') }}>
    <div class="text-sm font-semibold">Expenses by category</div>
    @if ($categories->isEmpty())
        <p class="py-6 text-center text-sm text-stone-500">No approved expenses this month.</p>
    @else
        @php($largest = max($categories->max('amount'), 1))
        <ul class="mt-3 space-y-2.5">
            @foreach ($categories as $row)
                <li class="text-sm" title="{{ $row['category'] }}: {{ Money::format($row['amount']) }} ({{ round($row['amount'] / max($total, 1) * 100) }}% of expenses)">
                    <div class="flex justify-between gap-3 text-stone-700">
                        <span class="truncate">{{ $row['category'] }}</span>
                        <span class="shrink-0 font-medium text-stone-900" style="font-variant-numeric: tabular-nums">{{ Money::format($row['amount']) }}</span>
                    </div>
                    <div class="mt-1 h-2.5">
                        <div class="h-full rounded-r-[4px] bg-[#2a78d6]" style="width: max(2px, {{ $row['amount'] / $largest * 100 }}%)"></div>
                    </div>
                </li>
            @endforeach
        </ul>
    @endif
</div>