@props(['label', 'value', 'icon', 'hint' => null, 'href' => null, 'tone' => 'brand'])
@php
    $tones = [
        'brand' => 'bg-brand-50 text-brand-600 dark:bg-brand-500/10 dark:text-brand-400',
        'blue' => 'bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400',
        'amber' => 'bg-amber-50 text-amber-600 dark:bg-amber-500/10 dark:text-amber-400',
        'violet' => 'bg-violet-50 text-violet-600 dark:bg-violet-500/10 dark:text-violet-400',
    ];
@endphp
<{{ $href ? 'a' : 'div' }} @if ($href) href="{{ $href }}" @endif class="card flex items-center gap-4 p-5 {{ $href ? 'transition hover:border-brand-300 dark:hover:border-brand-700' : '' }}">
    <span class="flex size-11 shrink-0 items-center justify-center rounded-xl {{ $tones[$tone] ?? $tones['brand'] }}">
        <x-dynamic-component :component="'heroicon-o-'.$icon" class="size-6" />
    </span>
    <div class="min-w-0">
        <p class="truncate text-sm text-gray-500 dark:text-gray-400">{{ $label }}</p>
        <p class="text-2xl font-semibold tracking-tight tabular-nums">{{ $value }}</p>
        @if ($hint)
            <p class="truncate text-xs text-gray-500 dark:text-gray-400">{{ $hint }}</p>
        @endif
    </div>
</{{ $href ? 'a' : 'div' }}>