@props(['items', 'valueFormatter' => null])

@php
    $collection = collect($items);
    $max = $collection->max('value') ?: 1;
@endphp

<div class="bar-list">
    @forelse ($collection->take(6) as $item)
        <div class="bar-row">
            <div class="bar-row__top">
                <span class="bar-row__label">{{ $item['label'] }}</span>
                <span class="bar-row__value">{{ $valueFormatter ? $valueFormatter($item['value']) : number_format($item['value'], 0, ',', '.') }}</span>
            </div>
            <div class="bar-row__track">
                <div class="bar-row__fill" style="width: {{ $max > 0 ? round(($item['value'] / $max) * 100, 1) : 0 }}%"></div>
            </div>
        </div>
    @empty
        <p class="text-faint" style="font-size:13px;">Belum ada data.</p>
    @endforelse
</div>