@props([
    'rows',
    'labelKey' => 'label',
    'valueKey' => 'value',
    'metaKey' => null,
    'money' => false,
    'hrefKey' => null,
    'color' => 'var(--panel-primary)',
])

@php
    $rows = collect($rows);
    $max = max(1, (float) $rows->max($valueKey));
@endphp

{{--
    Horizontal bars. RTL-native: each bar grows from the right edge, which is where a
    Persian reader's eye starts. Widths are percentages of the largest row, so the chart
    needs no axis and no measurement pass.
--}}
<ul {{ $attributes->merge(['class' => 'space-y-2.5']) }}>
    @foreach ($rows as $row)
        @php
            $value = (float) data_get($row, $valueKey);
            $href = $hrefKey ? data_get($row, $hrefKey) : null;
            $width = max(1.5, $value / $max * 100);
        @endphp

        <li>
            <{{ $href ? 'a' : 'div' }}
                @if ($href) href="{{ $href }}" wire:navigate @endif
                class="group block {{ $href ? 'cursor-pointer' : '' }}"
            >
                <div class="mb-1 flex items-baseline justify-between gap-3 text-xs">
                    <span class="min-w-0 truncate font-medium text-[var(--panel-text)] {{ $href ? 'group-hover:underline' : '' }}">
                        {{ data_get($row, $labelKey) }}
                    </span>

                    <span class="shrink-0 ltr-numerals text-[var(--panel-muted)]">
                        {{ $money ? number_format($value) : $value }}
                        @if ($metaKey && data_get($row, $metaKey) !== null)
                            <span class="text-[var(--panel-muted-soft)]">({{ data_get($row, $metaKey) }})</span>
                        @endif
                    </span>
                </div>

                <div class="h-2 w-full overflow-hidden rounded-full bg-[var(--panel-surface-muted)]">
                    <div
                        class="h-full rounded-full transition-[width] duration-500"
                        style="width: {{ round($width, 2) }}%; background: {{ data_get($row, 'color') ?: $color }}"
                    ></div>
                </div>
            </{{ $href ? 'a' : 'div' }}>
        </li>
    @endforeach
</ul>