@props([
    'title' => '',
    'headline' => '',
    'subheadline' => null,
    'rows' => [],
])

@php
    $rows = collect($rows)
        ->map(fn ($row) => [
            'label' => (string) ($row['label'] ?? ''),
            'value' => (int) ($row['value'] ?? 0),
            'bar_class' => (string) ($row['bar_class'] ?? 'bg-red-600'),
        ])
        ->all();

    $maxValue = (int) collect($rows)->max('value');
    // Inflate scale so the top value does not span the full track; ratios between rows stay the same.
    $scaleMax = $maxValue > 0
        ? max((int) ceil($maxValue * 3), $maxValue + 12, 20)
        : 1;
@endphp

<div {{ $attributes->merge(['class' => 'space-y-4']) }}>
    <div>
        <p class="text-sm font-medium text-gray-500">{{ $title }}</p>
        <p class="mt-1 text-2xl font-semibold text-gray-900 tracking-tight">{{ $headline }}</p>
        @if ($subheadline !== null && $subheadline !== '')
            <p class="mt-0.5 text-sm font-medium text-gray-600">{{ $subheadline }}</p>
        @endif
    </div>

    <div class="space-y-3">
        @foreach ($rows as $row)
            @php
                $value = (int) $row['value'];
                $barPercent = $maxValue > 0
                    ? round(($value / $scaleMax) * 100, 1)
                    : 0;
            @endphp
            <div class="space-y-1">
                <div class="flex items-center justify-between gap-3 text-sm">
                    <span class="font-medium text-gray-700 shrink-0">{{ $row['label'] }}</span>
                    <span class="tabular-nums font-semibold text-gray-900 shrink-0">{{ number_format($value) }}</span>
                </div>
                <div class="h-2.5 w-full rounded-full bg-gray-100 overflow-hidden" aria-hidden="true">
                    <div
                        class="h-full rounded-full transition-all duration-500 ease-out {{ $row['bar_class'] }}"
                        style="width: {{ $barPercent }}%"
                    ></div>
                </div>
            </div>
        @endforeach
    </div>
</div>