@props(['title', 'value', 'icon' => null, 'color' => 'brand'])

@php
    $colorClasses = [
        'brand' => 'bg-brand-50 text-brand-500 dark:bg-brand-500/15',
        'success' => 'bg-success-50 text-success-500 dark:bg-success-500/15',
        'warning' => 'bg-warning-50 text-warning-500 dark:bg-warning-500/15',
        'error' => 'bg-error-50 text-error-500 dark:bg-error-500/15',
        'blue' => 'bg-blue-light-50 text-blue-light-500 dark:bg-blue-light-500/15',
    ];
    $bgClass = $colorClasses[$color] ?? $colorClasses['brand'];
@endphp

<div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
    <div class="flex items-center justify-between">
        <div>
            <span class="text-sm text-gray-500 dark:text-gray-400">{{ $title }}</span>
            <h4 class="mt-2 text-title-sm font-bold text-gray-800 dark:text-white/90">
                {{ $value }}
            </h4>
        </div>
        @if(isset($icon) && $icon)
        <div class="flex size-12 items-center justify-center rounded-xl {{ $bgClass }}">
            {!! $icon !!}
        </div>
        @endif
    </div>
</div>