@props([
    'label',
    'value',
    'icon' => 'chart',
    'trend' => null,
    'tone' => 'brand',
])

@php
    $tones = [
        'brand' => 'bg-brand-50 text-brand-700',
        'navy'  => 'bg-navy-50 text-navy-700',
        'gold'  => 'bg-gold-50 text-gold-700',
        'amber' => 'bg-amber-50 text-amber-700',
        'red'   => 'bg-red-50 text-red-700',
        'blue'  => 'bg-blue-50 text-blue-700',
    ];
    $iconClass = $tones[$tone] ?? $tones['brand'];

    $iconPath = match($icon) {
        'cart'    => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l3 12h11l3-9H6"/><circle cx="9" cy="20" r="1.5"/><circle cx="18" cy="20" r="1.5"/>',
        'server'  => '<rect x="3" y="4" width="18" height="6" rx="2" stroke-width="2"/><rect x="3" y="14" width="18" height="6" rx="2" stroke-width="2"/>',
        'wallet'  => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7h18v12H3z"/><path stroke-width="2" d="M16 13h2"/>',
        'chat'    => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12c0-4.4 4-8 9-8s9 3.6 9 8-4 8-9 8c-1.5 0-2.9-.3-4.2-.8L3 21l1-4.5C3.3 15.2 3 13.6 3 12z"/>',
        'check'   => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>',
        'clock'   => '<circle cx="12" cy="12" r="9" stroke-width="2"/><path stroke-linecap="round" stroke-width="2" d="M12 7v5l3 2"/>',
        'users'   => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20H7a4 4 0 014-4h2a4 4 0 014 4z"/><circle cx="12" cy="8" r="4" stroke-width="2"/>',
        'document'=> '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3h7l4 4v14H4V3h5z"/>',
        default   => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 17l6-6 4 4 8-8"/>',
    };
@endphp

<div class="card card-padded">
    <div class="flex items-start justify-between gap-3">
        <div class="min-w-0">
            <p class="text-sm font-medium text-navy-500">{{ $label }}</p>
            <p class="mt-2 text-3xl font-extrabold text-navy-900 truncate">{{ $value }}</p>
            @if($trend !== null)
                <p class="mt-2 text-xs font-semibold {{ $trend >= 0 ? 'text-brand-600' : 'text-red-600' }}">
                    {{ $trend >= 0 ? '▲' : '▼' }} {{ abs($trend) }}%
                </p>
            @endif
        </div>
        <span class="inline-flex items-center justify-center w-12 h-12 rounded-2xl {{ $iconClass }} shrink-0">
            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">{!! $iconPath !!}</svg>
        </span>
    </div>
</div>