@props(['realizado', 'meta'])

{{-- Quanto da meta foi atingido. Sem meta, não há percentual. --}}
@php
    $alvo = (float) $meta;
    $percentual = $alvo > 0 ? (float) $realizado / $alvo * 100 : null;
@endphp

@if ($percentual === null)
    <span class="text-slate-300">—</span>
@else
    <div class="flex items-center justify-end gap-2" title="{{ number_format($percentual, 1, ',', '.') }}% da meta">
        <div class="h-1.5 w-16 overflow-hidden rounded-full bg-slate-200" aria-hidden="true">
            <div @class([
                'h-full rounded-full',
                'bg-emerald-600' => $percentual >= 100,
                'bg-amber-500' => $percentual >= 70 && $percentual < 100,
                'bg-rose-500' => $percentual < 70,
            ]) style="width: {{ min(100, $percentual) }}%"></div>
        </div>
        <span @class([
            'w-10 text-right text-xs tabular-nums',
            'text-emerald-700' => $percentual >= 100,
            'text-slate-700' => $percentual < 100,
        ])>{{ number_format($percentual, 0, ',', '.') }}%</span>
    </div>
@endif