@props(['label', 'value', 'icon' => 'activity', 'tone' => 'primary', 'delta' => null])
<div class="stat-card">
    <div>
        <p class="text-xs font-semibold text-ink-muted">{{ $label }}</p>
        <p class="text-2xl font-display font-bold text-ink mt-1">{{ $value }}</p>
        @if ($delta)
            <p class="text-xs mt-1.5 font-medium {{ str_starts_with($delta, '-') ? 'text-danger' : 'text-success' }}">{{ $delta }}</p>
        @endif
    </div>
    <div class="w-10 h-10 rounded-lg bg-{{ $tone }}-50 text-{{ $tone }}-600 flex items-center justify-center shrink-0">
        <i data-lucide="{{ $icon }}" class="w-5 h-5"></i>
    </div>
</div>