@props([
    'value' => null,       // note sur 5 (float|int|null)
    'label' => null,       // libellé optionnel au-dessus de la barre
    'delta' => null,       // écart signé vs référence précédente (float|null)
    'size' => 'md',        // 'sm' | 'md'
])

@php
    $pct = $value !== null ? max(0, min(100, round(((float) $value / 5) * 100))) : 0;

    // Couleur de la barre alignée sur la grille de notation générique
    // (Criterion::GENERIC_SCALE) : rouge sous la moyenne, ambre autour du
    // "conforme", sarcelle au-dessus — un simple coup d'œil sur la couleur
    // donne déjà le sens, avant même de lire le chiffre.
    $barColor = $value === null ? 'var(--np-slate)'
        : ($value < 2.5 ? 'var(--np-red)'
        : ($value < 3.5 ? 'var(--np-amber)'
        : 'var(--np-signal)'));

    $height = $size === 'sm' ? '6px' : '10px';
@endphp

<div {{ $attributes }}>
    @if($label)
        <div class="np-eyebrow mb-1">{{ $label }}</div>
    @endif

    <div class="flex items-center gap-3">
        <span class="{{ $size === 'sm' ? 'np-score-sm' : 'np-score' }}">
            {{ $value !== null ? number_format((float) $value, 1) : '—' }}<span class="np-score-den">/5</span>
        </span>

        @if($delta !== null)
            @php
                $deltaColor = $delta > 0 ? 'var(--np-green)' : ($delta < 0 ? 'var(--np-red)' : 'var(--np-ink-faint)');
                $deltaSign = $delta > 0 ? '+' : '';
                $deltaArrow = $delta > 0 ? '&uarr;' : ($delta < 0 ? '&darr;' : '');
            @endphp
            <span class="np-font-mono text-xs font-semibold" style="color: {{ $deltaColor }};" title="Par rapport à la semaine précédente">
                {!! $deltaArrow !!} {{ $deltaSign }}{{ number_format($delta, 1) }}
            </span>
        @endif
    </div>

    <div class="w-full rounded-full overflow-hidden mt-1.5" style="height: {{ $height }}; background: var(--np-line);">
        <div class="h-full rounded-full np-transition" style="width: {{ $pct }}%; background: {{ $barColor }};"></div>
    </div>
</div>