@props(['label', 'value', 'note' => null, 'tone' => 'default'])

<div {{ $attributes->class([
    'rounded-xl border p-4',
    'bg-white dark:bg-gray-800 border-gray-100 dark:border-gray-700' => $tone === 'default',
    'bg-green-50 dark:bg-green-500/10 border-green-100 dark:border-green-500/20' => $tone === 'good',
    'bg-amber-50 dark:bg-amber-500/10 border-amber-100 dark:border-amber-500/20' => $tone === 'warn',
    'bg-red-50 dark:bg-red-500/10 border-red-100 dark:border-red-500/20' => $tone === 'bad',
]) }}>
    <div class="text-xs font-semibold text-gray-500 dark:text-gray-400">{{ $label }}</div>
    <div class="mt-1.5 text-2xl font-extrabold tracking-tight tabular-nums text-gray-900 dark:text-white">{{ $value }}</div>
    @if ($note)
        <div class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">{{ $note }}</div>
    @endif
</div>