@props([
    'delta' => null,         // float | null. null => no prior baseline ("new"); 0 => flat; >0 up; <0 down
    'comparisonLabel' => null, // optional small label e.g. "vs last week"
    'size' => 'sm',          // 'sm' | 'xs'
])

@php
    $isNew  = $delta === null;
    $isFlat = !$isNew && abs($delta) < 0.05;
    $isUp   = !$isNew && !$isFlat && $delta > 0;

    $cls = match (true) {
        $isNew  => 'bg-indigo-100/80 text-indigo-700 ring-indigo-200/60',
        $isFlat => 'bg-zinc-100/80 text-zinc-600 ring-zinc-200/60',
        $isUp   => 'bg-emerald-100/80 text-emerald-700 ring-emerald-200/60',
        default => 'bg-rose-100/80 text-rose-700 ring-rose-200/60',
    };

    $padding = $size === 'xs' ? 'px-1.5 py-0.5 text-[10px]' : 'px-2 py-0.5 text-xs';
@endphp

<span class="inline-flex items-center gap-1">
    <span class="inline-flex items-center gap-1 rounded-full {{ $padding }} font-bold ring-1 ring-inset {{ $cls }}">
        @if ($isNew)
            <svg class="h-2.5 w-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4"/>
            </svg>
            New
        @elseif ($isFlat)
            <svg class="h-2.5 w-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 12h14"/>
            </svg>
            Flat
        @elseif ($isUp)
            <svg class="h-2.5 w-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 15l7-7 7 7"/>
            </svg>
            {{ number_format(abs($delta), 1) }}%
        @else
            <svg class="h-2.5 w-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"/>
            </svg>
            {{ number_format(abs($delta), 1) }}%
        @endif
    </span>
    @if ($comparisonLabel)
        <span class="truncate text-[10px] font-medium text-zinc-500">{{ $comparisonLabel }}</span>
    @endif
</span>