@props(['label', 'value', 'href' => null, 'hint' => null, 'tone' => 'indigo', 'compact' => false])

@php
$iconClasses = match ($tone) {
    'emerald' => 'bg-emerald-50 text-emerald-600 ring-emerald-100',
    'amber' => 'bg-amber-50 text-amber-600 ring-amber-100',
    'violet' => 'bg-accent-50 text-accent-600 ring-accent-100',
    default => 'bg-brand-50 text-brand-600 ring-brand-100',
};
@endphp

<{{ $href ? 'a' : 'div' }} @if ($href) href="{{ $href }}" @endif {{ $attributes->merge(['class' => 'flex items-center rounded-2xl bg-white shadow-raised transition duration-150 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 '.($compact ? 'gap-3 p-4 ' : 'gap-4 p-6 ').($href ? 'hover:-translate-y-0.5' : '')]) }}>
    <div class="grid shrink-0 place-items-center ring-1 {{ $compact ? 'h-10 w-10 rounded-lg' : 'h-12 w-12 rounded-xl' }} {{ $iconClasses }}">
        {{ $icon }}
    </div>

    <div class="min-w-0">
        <div class="truncate font-medium text-gray-500 {{ $compact ? 'text-xs' : 'text-sm' }}">{{ $label }}</div>
        <div class="truncate font-bold leading-tight text-gray-900 {{ $compact ? 'text-lg' : 'text-3xl' }}">{{ $value }}</div>

        @if ($hint)
            <div class="truncate text-xs text-gray-500">{{ $hint }}</div>
        @endif
    </div>
</{{ $href ? 'a' : 'div' }}>