@props([
    'rows',          // [['label' =>, 'total' => Money, 'share' => float], ...] biggest first
    'limit' => 8,
])

@php
    use App\Support\MoneyFormatter;

    $shown = collect($rows)->take($limit);
    $max = max(0.01, $shown->max(fn ($row) => $row['total']->toFloat()) ?? 0.01);
@endphp

{{--
    One series, so every bar wears the same hue: bar length already says which
    is biggest, and colouring by size would spend the identity channel saying
    it twice. No legend either — the heading names what is plotted.
--}}
<div {{ $attributes->merge(['class' => 'ranked']) }}>
    @foreach ($shown as $row)
        <div class="ranked__row">
            <div class="ranked__name">
                {{ $row['label'] }}<span class="ranked__share">{{ number_format($row['share'], 0) }}%</span>
            </div>
            <div class="ranked__track"
                 title="{{ $row['label'] }} — {{ MoneyFormatter::format($row['total']) }}">
                <div class="ranked__fill" style="width:{{ max(1, round($row['total']->toFloat() / $max * 100, 1)) }}%"></div>
            </div>
            <div class="ranked__value money"><x-money :value="$row['total']" compact /></div>
        </div>
    @endforeach

    @if (count($rows) > $limit)
        <p class="hint">{{ __('chart.and_more', ['count' => count($rows) - $limit]) }}</p>
    @endif
</div>