@props(['label', 'value', 'icon' => 'bar-chart-3', 'color' => 'primary'])

@php
$colorMap = [
    'primary' => 'bg-primary-50 dark:bg-primary-900/20 text-primary-700 dark:text-primary-400',
    'amber' => 'bg-amber-50 dark:bg-amber-900/20 text-amber-600 dark:text-amber-400',
    'green' => 'bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400',
    'red' => 'bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400',
    'blue' => 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400',
];
$classes = $colorMap[$color] ?? $colorMap['primary'];
@endphp

<div class="bg-white dark:bg-slate-800 rounded-2xl p-5 shadow-soft border border-slate-100 dark:border-slate-700 hover:-translate-y-0.5 transition-transform duration-200">
    <div class="flex items-center justify-between mb-3">
        <div class="w-11 h-11 rounded-xl {{ $classes }} flex items-center justify-center">
            <x-icon :name="$icon" class="w-5 h-5" />
        </div>
    </div>
    <p class="text-2xl font-extrabold text-slate-800 dark:text-white">{{ $value }}</p>
    <p class="text-xs text-slate-400 mt-1">{{ $label }}</p>
</div>