@props(['title', 'value', 'sub' => null, 'icon' => null, 'tone' => 'accent'])

@php
    $tones = [
        'accent' => 'bg-accent-100 text-accent-700',
        'emerald' => 'bg-emerald-100 text-emerald-700',
        'amber' => 'bg-amber-100 text-amber-700',
        'rose' => 'bg-rose-100 text-rose-700',
        'sky' => 'bg-sky-100 text-sky-700',
    ];
@endphp

<div class="group rounded-2xl border border-slate-100 bg-white p-5 shadow-sm shadow-slate-900/[0.03] transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-900/5">
    <div class="flex items-start justify-between gap-3">
        <div class="min-w-0">
            <p class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ $title }}</p>
            <p class="mt-2 truncate font-display text-2xl font-bold text-slate-900">{{ $value }}</p>
            @if ($sub)
                <p class="mt-1 text-xs text-slate-400">{{ $sub }}</p>
            @endif
        </div>
        @if ($icon)
            <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl {{ $tones[$tone] ?? $tones['accent'] }} transition group-hover:scale-105">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="{{ $icon }}"/></svg>
            </span>
        @endif
    </div>
</div>