@props(['label', 'value', 'icon' => 'heroicon-o-chart-bar', 'tone' => 'amber', 'href' => null, 'hint' => null])
@php
    $tones = [
        'amber' => 'bg-brand-50 text-brand-600 dark:bg-brand-500/10 dark:text-brand-400',
        'green' => 'bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400',
        'red' => 'bg-rose-50 text-rose-600 dark:bg-rose-500/10 dark:text-rose-400',
        'blue' => 'bg-sky-50 text-sky-600 dark:bg-sky-500/10 dark:text-sky-400',
        'violet' => 'bg-violet-50 text-violet-600 dark:bg-violet-500/10 dark:text-violet-400',
        'gray' => 'bg-ink-100 text-ink-600 dark:bg-ink-800 dark:text-ink-300',
    ];
    $tag = $href ? 'a' : 'div';
@endphp
<{{ $tag }} @if($href) href="{{ $href }}" @endif {{ $attributes->merge(['class' => 'card group flex items-center gap-4 p-5 transition'.($href ? ' hover:-translate-y-0.5 hover:shadow-md' : '')]) }}>
    <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl {{ $tones[$tone] ?? $tones['amber'] }}">
        <x-dynamic-component :component="$icon" class="h-6 w-6" />
    </div>
    <div class="min-w-0">
        <div class="truncate text-xs font-medium tracking-wide text-ink-500 uppercase">{{ $label }}</div>
        <div class="mt-0.5 text-2xl font-semibold tracking-tight text-ink-900 tabular-nums dark:text-white">{{ $value }}</div>
        @if ($hint)<div class="mt-0.5 truncate text-xs text-ink-400">{{ $hint }}</div>@endif
    </div>
</{{ $tag }}>