@props(['title', 'value', 'icon', 'color'])

@php
// Map warna untuk icon background dan text
$colors = [
    'indigo' => 'bg-indigo-100 text-indigo-600 shadow-indigo-100',
    'emerald' => 'bg-emerald-100 text-emerald-600 shadow-emerald-100',
    'rose' => 'bg-rose-100 text-rose-600 shadow-rose-100',
    'amber' => 'bg-amber-100 text-amber-600 shadow-amber-100',
    'blue' => 'bg-blue-100 text-blue-600 shadow-blue-100',
][$color ?? 'indigo'];
@endphp

<div class="bg-white p-6 rounded-3xl border border-slate-200 shadow-sm hover:shadow-md transition-all duration-300">
    <div class="flex items-center justify-between mb-4">
        <div class="w-12 h-12 {{ $colors }} rounded-2xl flex items-center justify-center shadow-sm">
            <i class="fas {{ $icon }} text-xl"></i>
        </div>
        <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Statistik</span>
    </div>
    
    <div class="space-y-1">
        <h3 class="text-3xl font-black text-slate-800 leading-none">
            {{ $value }}
        </h3>
        <p class="text-xs font-bold text-slate-500 uppercase tracking-tighter">
            {{ $title }}
        </p>
    </div>
</div>