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

@php
$bgClass = match($color) {
    'primary' => 'stats-card',
    'white' => 'bg-white',
    default => 'bg-white'
};

$textClass = match($color) {
    'primary' => 'text-white',
    'white' => 'text-gray-900',
    default => 'text-gray-900'
};

$iconColor = match($color) {
    'primary' => 'text-white/60',
    'orange' => 'text-orange-500',
    'green' => 'text-green-500',
    default => 'text-gray-500'
};
@endphp

<div class="{{ $bgClass }} rounded-lg shadow-lg p-6">
    <div class="flex items-center">
        <div class="flex-1">
            <p class="{{ $color === 'primary' ? 'text-white/80' : 'text-gray-600' }} text-sm font-medium">{{ $title }}</p>
            <p class="text-3xl font-bold {{ $textClass }}">{{ $value }}</p>
        </div>
        <div class="{{ $iconColor }}">
            <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
                {!! $icon !!}
            </svg>
        </div>
    </div>
</div>