@props(['title', 'value', 'subtitle' => null, 'color' => 'blue'])

@php
$colorClasses = [
    'blue' => 'bg-blue-50 text-blue-600 border-blue-200',
    'green' => 'bg-green-50 text-green-600 border-green-200',
    'red' => 'bg-red-50 text-red-600 border-red-200',
    'yellow' => 'bg-yellow-50 text-yellow-600 border-yellow-200',
    'indigo' => 'bg-indigo-50 text-indigo-600 border-indigo-200',
    'purple' => 'bg-purple-50 text-purple-600 border-purple-200',
    'pink' => 'bg-pink-50 text-pink-600 border-pink-200',
    'gray' => 'bg-gray-50 text-gray-600 border-gray-200',
];
$accent = $colorClasses[$color] ?? $colorClasses['blue'];
@endphp

<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
    <div class="flex items-center justify-between">
        <div>
            <p class="text-sm font-medium text-gray-500">{{ $title }}</p>
            <p class="mt-1 text-2xl font-bold text-gray-900">{{ $value }}</p>
            @if($subtitle)
                <p class="mt-1 text-sm {{ str_contains($subtitle, '+') ? 'text-green-600' : (str_contains($subtitle, '-') ? 'text-red-600' : 'text-gray-500') }}">
                    {{ $subtitle }}
                </p>
            @endif
        </div>
        <div class="flex-shrink-0 p-3 rounded-lg {{ $accent }}">
            {{ $slot }}
        </div>
    </div>
</div>