@props(['composition' => []])
@php
    if (is_string($composition)) {
        $composition = json_decode($composition, true) ?? [];
    }
    if (!is_array($composition)) {
        $composition = [];
    }
@endphp
<div>
    <div class="fiber-bar" style="display:flex;height:10px;border-radius:5px;overflow:hidden;gap:1px;width:100%;">
        @foreach($composition as $comp)
            <div style="width:{{ $comp['pct'] }}%;background:{{ $comp['color'] ?? '#ccc' }}" title="{{ $comp['label'] }} {{ $comp['pct'] }}%"></div>
        @endforeach
    </div>
    <div class="fiber-legend mt-1 text-xs" style="display:flex; gap: 0.5rem; flex-wrap: wrap;">
        @foreach($composition as $comp)
            <span style="display:inline-flex;align-items:center;gap:0.2rem;">
                <span style="color:{{ $comp['color'] ?? '#ccc' }}">●</span> {{ $comp['pct'] }}% {{ $comp['label'] }}
            </span>
        @endforeach
    </div>
</div>