@props(['value', 'label', 'icon', 'color' => 'blue', 'trend' => null, 'trendUp' => true])

@php
    $colorClasses = [
        'blue' => 'bg-blue-50 text-blue-600 border-blue-100',
        'green' => 'bg-green-50 text-green-600 border-green-100',
        'purple' => 'bg-purple-50 text-purple-600 border-purple-100',
        'orange' => 'bg-orange-50 text-orange-600 border-orange-100',
        'red' => 'bg-red-50 text-red-600 border-red-100',
        'gold' => 'bg-amber-50 text-amber-600 border-amber-100',
        'royal' => 'bg-royal-blue/10 text-royal-blue border-royal-blue/20',
    ];
    
    $iconBgClasses = [
        'blue' => 'bg-blue-100',
        'green' => 'bg-green-100',
        'purple' => 'bg-purple-100',
        'orange' => 'bg-orange-100',
        'red' => 'bg-red-100',
        'gold' => 'bg-amber-100',
        'royal' => 'bg-royal-blue/20',
    ];
@endphp

<div {{ $attributes->merge(['class' => 'bg-white p-6 rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition-all group']) }}>
    <div class="flex items-start justify-between mb-4">
        <div class="w-12 h-12 {{ $iconBgClasses[$color] ?? $iconBgClasses['blue'] }} rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform">
            <i class="{{ $icon }} {{ $colorClasses[$color] ?? $colorClasses['blue'] }}"></i>
        </div>
        @if($trend)
            <div class="flex items-center gap-1 text-xs font-semibold {{ $trendUp ? 'text-green-600' : 'text-red-600' }}">
                <i class="fa-solid {{ $trendUp ? 'fa-arrow-up' : 'fa-arrow-down' }}"></i>
                <span>{{ $trend }}</span>
            </div>
        @endif
    </div>
    <div>
        <span class="block text-3xl font-display font-bold text-gray-900 mb-1">{{ $value }}</span>
        <span class="block text-sm text-gray-500 font-medium">{{ $label }}</span>
    </div>
</div>