@props([
    'label',
    'value',
    'change' => null,
    'formattedValue' => null,
    'color' => 'slate',
    'watchTime' => false,
])

@php
    $displayValue = $formattedValue ?? (is_numeric($value) ? number_format((float) $value, 0, ',', ' ') : (string) $value);
    $ringClass = match ($color) {
        'violet' => 'ring-violet-100',
        'rose' => 'ring-rose-100',
        'sky' => 'ring-sky-100',
        'emerald' => 'ring-emerald-100',
        'amber' => 'ring-amber-100',
        'indigo' => 'ring-indigo-100',
        default => 'ring-slate-100',
    };
    $textClass = match ($color) {
        'violet' => 'text-violet-600',
        'rose' => 'text-rose-600',
        'sky' => 'text-sky-600',
        'emerald' => 'text-emerald-600',
        'amber' => 'text-amber-600',
        'indigo' => 'text-indigo-600',
        default => 'text-slate-600',
    };
    $valueClass = match ($color) {
        'violet' => 'text-violet-700',
        'rose' => 'text-rose-700',
        'sky' => 'text-sky-700',
        'emerald' => 'text-emerald-700',
        'amber' => 'text-amber-700',
        'indigo' => 'text-indigo-700',
        default => 'text-slate-900',
    };
    $direction = $change['direction'] ?? 'flat';
    $changeFormatted = $change['formatted'] ?? null;
@endphp

<div {{ $attributes->merge(['class' => 'rounded-lg bg-white px-3 py-2.5 text-sm shadow-sm ring-1 '.$ringClass]) }}>
    <span class="text-xs {{ $textClass }}">{{ $label }}</span>
    <div class="mt-0.5 flex flex-wrap items-end justify-between gap-2">
        <p class="font-bold {{ $valueClass }}">{{ $displayValue }}</p>
        @if ($changeFormatted)
            <span @class([
                'inline-flex items-center gap-0.5 text-xs font-semibold',
                'text-emerald-600' => $direction === 'up',
                'text-rose-600' => $direction === 'down',
                'text-slate-400' => $direction === 'flat',
            ])>
                @if ($direction === 'up')
                    <svg class="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/></svg>
                @elseif ($direction === 'down')
                    <svg class="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M5.22 10.78a.75.75 0 0 1 1.06 0L10 8.06l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1-1.06 0L5.22 9.72a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/></svg>
                @else
                    <span aria-hidden="true">—</span>
                @endif
                {{ $changeFormatted }}
            </span>
        @endif
    </div>
</div>