@props(['label', 'value', 'sub' => null, 'tone' => 'neutral'])

@php
$dot = [
    'good' => 'bg-emerald-500',
    'warn' => 'bg-amber-500',
    'bad' => 'bg-red-500',
    'amber' => 'bg-amber-500',
    'neutral' => 'bg-stone-300',
][$tone] ?? 'bg-stone-300';
@endphp

<div class="bg-white rounded-xl border border-stone-200 p-4 sm:p-5">
    <div class="flex items-center gap-2 text-xs font-medium text-stone-500 uppercase tracking-wide">
        <span class="w-1.5 h-1.5 rounded-full {{ $dot }}"></span>
        {{ $label }}
    </div>
    <div class="mt-2 text-2xl font-semibold text-stone-900">{{ $value }}</div>
    @if ($sub)
        <div class="mt-1 text-xs text-stone-500">{{ $sub }}</div>
    @endif
</div>