@props(['title', 'value', 'trend' => null, 'trendLabel' => null, 'color' => 'emerald'])

@php
    $colorClasses = [
        'emerald' => ['bg' => 'bg-emerald-50', 'icon' => 'text-emerald-600', 'gradient' => 'from-emerald-500 to-emerald-600'],
        'blue' => ['bg' => 'bg-blue-50', 'icon' => 'text-blue-600', 'gradient' => 'from-blue-500 to-blue-600'],
        'amber' => ['bg' => 'bg-amber-50', 'icon' => 'text-amber-600', 'gradient' => 'from-amber-500 to-amber-600'],
        'purple' => ['bg' => 'bg-purple-50', 'icon' => 'text-purple-600', 'gradient' => 'from-purple-500 to-purple-600'],
    ];
    $colors = $colorClasses[$color] ?? $colorClasses['emerald'];
@endphp

<div class="bg-white rounded-lg border border-slate-200 shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden group">
    <div class="p-4">
        <div class="flex items-start justify-between">
            <div class="flex-1">
                <p class="text-xs font-medium text-slate-600 mb-1">{{ $title }}</p>
                <p class="text-2xl font-bold text-slate-900">{{ $value }}</p>
                @if($trend !== null && $trendLabel)
                    <div class="flex items-center mt-2 space-x-1">
                        @if($trend > 0)
                            <svg class="w-3 h-3 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                            </svg>
                            <span class="text-xs font-medium text-emerald-600">{{ $trend }}%</span>
                        @elseif($trend < 0)
                            <svg class="w-3 h-3 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"></path>
                            </svg>
                            <span class="text-xs font-medium text-red-600">{{ abs($trend) }}%</span>
                        @endif
                        <span class="text-xs text-slate-500">{{ $trendLabel }}</span>
                    </div>
                @endif
            </div>
            @isset($icon)
                <div class="p-2 {{ $colors['bg'] }} rounded-lg group-hover:scale-110 transition-transform duration-200 flex-shrink-0">
                    <div class="{{ $colors['icon'] }}">
                        {!! $icon !!}
                    </div>
                </div>
            @endisset
        </div>
    </div>
    <div class="h-0.5 bg-gradient-to-r {{ $colors['gradient'] }}"></div>
</div>