@props(['segments'])

{{--
    Pure inline SVG donut — $segments is ['label' => string, 'value' => number, 'color' => css color][].
    No JS charting library needed for a single static snapshot chart.
--}}
@php
    $total = max(1, collect($segments)->sum('value'));
    $circumference = 2 * M_PI * 40;
    $offset = 0;
@endphp

<div class="flex items-center gap-6">
    <svg viewBox="0 0 100 100" class="h-28 w-28 -rotate-90">
        <circle cx="50" cy="50" r="40" fill="none" stroke="currentColor" stroke-width="14" class="text-slate-100 dark:text-slate-800" />
        @foreach ($segments as $segment)
            @php
                $fraction = $segment['value'] / $total;
                $dash = $fraction * $circumference;
                $gap = $circumference - $dash;
            @endphp
            <circle
                cx="50" cy="50" r="40" fill="none" stroke="{{ $segment['color'] }}" stroke-width="14"
                stroke-dasharray="{{ $dash }} {{ $gap }}" stroke-dashoffset="{{ -$offset }}"
            />
            @php $offset += $dash; @endphp
        @endforeach
    </svg>

    <div class="space-y-2 text-sm">
        @foreach ($segments as $segment)
            <div class="flex items-center gap-2">
                <span class="h-2.5 w-2.5 rounded-full" style="background-color: {{ $segment['color'] }}"></span>
                <span class="text-slate-600 dark:text-slate-300">{{ $segment['label'] }}</span>
                <span class="font-semibold text-slate-900 dark:text-white">{{ number_format($segment['value']) }}</span>
            </div>
        @endforeach
    </div>
</div>