@props([
    'value' => null,        // signed % change (float) or null when no baseline
    'upIsGood' => true,     // whether an increase is favourable
    'suffix' => '%',
])

@php
    // Mirrors the $delta() convention used across the Reports blades: green when
    // the move is favourable, rose when not, slate when there's no baseline.
    if ($value === null) {
        $txt = '—';
        $cls = 'text-slate-400';
        $icon = 'minus';
    } else {
        $good = $value >= 0 ? $upIsGood : ! $upIsGood;
        $txt = ($value > 0 ? '+' : '') . number_format((float) $value, 1) . $suffix;
        $cls = $good ? 'text-emerald-600' : 'text-rose-600';
        $icon = $value >= 0 ? 'arrow-trending-up' : 'arrow-trending-down';
    }
@endphp

<span {{ $attributes->merge(['class' => "inline-flex items-center gap-0.5 text-xs font-semibold tabular-nums $cls"]) }}>
    <x-icon :name="$icon" class="h-3 w-3 shrink-0" />
    {{ $txt }}
</span>