@props(['label', 'value', 'color' => 'indigo', 'iconBg' => null])

@php
    $colorMap = [
        'indigo' => ['bg' => 'bg-[#E9EBF5]', 'text' => 'text-[#4A538F]'],
        'green' => ['bg' => 'bg-[#C9F7E3]', 'text' => 'text-[#1F9254]'],
        'blue' => ['bg' => 'bg-[#E0F2FE]', 'text' => 'text-[#0369A1]'],
        'red' => ['bg' => 'bg-[#FFD6D6]', 'text' => 'text-[#C0392B]'],
    ];
    $colors = $colorMap[$color] ?? $colorMap['indigo'];
@endphp

<div class="card-custom rounded-xl shadow-sm p-6">
    <div class="flex items-center gap-4">
        <div class="p-3 rounded-lg {{ $colors['bg'] }}">
            <div class="{{ $colors['text'] }}">
                {{ $icon ?? '' }}
            </div>
        </div>
        <div>
            <p class="text-sm text-[#7A7FAE]">{{ $label }}</p>
            <p class="text-2xl font-bold text-[#2F347A]">{{ $value }}</p>
        </div>
    </div>
</div>