@props([
    'title',
    'value',
    'description' => null,
    'variant' => 'default',
])

@php
    $variants = [
        'default' => 'bg-white text-gray-900 ring-gray-200/80',
        'brand' => 'bg-brand-900 text-white ring-brand-800',
        'accent' => 'bg-amber-50 text-amber-950 ring-amber-200/80',
        'muted' => 'bg-slate-50 text-gray-800 ring-gray-200/80',
    ];
    $v = $variants[$variant] ?? $variants['default'];
@endphp

<div {{ $attributes->merge(['class' => 'rounded-xl border border-transparent p-5 shadow-card ring-1 '.$v]) }}>
    <div class="flex items-start justify-between gap-3">
        <div class="min-w-0 flex-1">
            <p class="text-sm font-medium opacity-80">{{ $title }}</p>
            <p class="mt-2 text-3xl font-semibold tabular-nums tracking-tight">{{ $value }}</p>
            @if ($description)
                <p class="mt-1 text-xs opacity-75">{{ $description }}</p>
            @endif
        </div>
        @isset($icon)
            <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg ring-1 ring-black/5 {{ $variant === 'default' ? 'bg-brand-50 text-brand-800 ring-brand-900/10' : 'bg-white/10 ring-white/10' }}">
                {{ $icon }}
            </div>
        @endisset
    </div>
</div>