@props([
    'title',
    'value' => null,
    'description' => null,
    'icon' => null,
    'tone' => 'emerald',
])

@php
    $tones = [
        'emerald' => 'bg-teal-50 text-teal-700 dark:bg-teal-900/25 dark:text-teal-300',
        'blue' => 'bg-sky-50 text-sky-700 dark:bg-sky-900/25 dark:text-sky-300',
        'amber' => 'bg-amber-50 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300',
        'purple' => 'bg-purple-50 text-purple-700 dark:bg-purple-900/25 dark:text-purple-300',
        'indigo' => 'bg-indigo-50 text-indigo-700 dark:bg-indigo-900/25 dark:text-indigo-300',
        'rose' => 'bg-rose-50 text-rose-700 dark:bg-rose-900/25 dark:text-rose-300',
        'slate' => 'bg-slate-50 text-slate-700 dark:bg-slate-800 dark:text-slate-300',
    ];
    $toneClass = $tones[$tone] ?? $tones['emerald'];
@endphp

<div {{ $attributes->merge(['class' => 'admin-card p-6']) }}>
    <div class="mb-3 flex items-center justify-between gap-3">
        <span class="text-sm font-semibold text-gray-500 dark:text-gray-400">{{ $title }}</span>
        @if($icon)
            <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg {{ $toneClass }}">
                <i class="bi {{ $icon }} text-sm"></i>
            </span>
        @endif
    </div>
    <div class="text-2xl font-bold text-gray-900 dark:text-white">{{ $value }}</div>
    @if($description)
        <p class="mt-1 text-xs text-gray-500 dark:text-gray-500">{{ $description }}</p>
    @endif
</div>