@props([
    'series' => [],       // [['label' => 'Product A', 'value' => 1200, 'meta' => '12 sold'], …]
    'formatter' => null,
    'slot' => 1,
    'label' => 'Value',
])

@php
    /*
     * Horizontal bars for ranked magnitude ("top products", "top customers").
     *
     * Category names read straight along the axis instead of being rotated,
     * which is the whole reason to lay a ranking on its side.
     */
    $rows = collect($series)->values();
    $max = max(1, (float) $rows->max('value'));
    $format = $formatter ?? fn ($value) => number_format((float) $value);
@endphp

<div class="viz">
    <x-chart.palette />

    @if ($rows->isEmpty())
        <div class="flex h-32 items-center justify-center text-sm text-slate-400">No data for this period.</div>
    @else
        <div class="space-y-2.5">
            @foreach ($rows as $row)
                @php $percent = max(1.5, ((float) $row['value'] / $max) * 100); @endphp

                <div>
                    <div class="mb-1 flex items-baseline justify-between gap-3 text-sm">
                        <span class="truncate text-slate-700 dark:text-slate-200">{{ $row['label'] }}</span>

                        <span class="tabular shrink-0 font-semibold text-slate-900 dark:text-white">
                            {{ $format($row['value']) }}
                            @if (! empty($row['meta']))
                                <span class="ml-1 font-normal text-slate-400">{{ $row['meta'] }}</span>
                            @endif
                        </span>
                    </div>

                    <div class="h-2 overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800">
                        <div class="h-full rounded-full"
                             style="width: {{ round($percent, 2) }}%; background: var(--series-{{ $slot }})"></div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</div>