@props(['title', 'value', 'icon' => null, 'change' => null, 'changeType' => 'increase', 'color' => 'blue'])

@php
    $colorClasses = match($color) {
        'blue' => 'bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300',
        'green' => 'bg-green-50 dark:bg-green-900/30 text-green-600 dark:text-green-300',
        'red' => 'bg-red-50 dark:bg-red-900/30 text-red-600 dark:text-red-300',
        'yellow' => 'bg-yellow-50 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-300',
        'purple' => 'bg-purple-50 dark:bg-purple-900/30 text-purple-600 dark:text-purple-300',
        'gray' => 'bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-300',
        default => 'bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300'
    };
    
    $changeClasses = $changeType === 'increase' 
        ? 'text-green-500 dark:text-green-400' 
        : 'text-red-500 dark:text-red-400';
    
    $changeIcon = $changeType === 'increase'
        ? '<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>'
        : '<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>';
@endphp

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 border border-gray-200 dark:border-gray-700">
    <div class="flex items-center">
        @if ($icon)
            <div class="p-3 rounded-full mr-4 {{ $colorClasses }}">
                {!! $icon !!}
            </div>
        @endif
        
        <div>
            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ $title }}</p>
            <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-100">{{ $value }}</h3>
            
            @if ($change)
                <div class="flex items-center mt-1">
                    <span class="{{ $changeClasses }} text-sm font-medium flex items-center">
                        {!! $changeIcon !!}
                        <span class="ml-1">{{ $change }}</span>
                    </span>
                    <span class="text-sm text-gray-500 dark:text-gray-400 ml-1">مقارنة بالفترة السابقة</span>
                </div>
            @endif
        </div>
    </div>
</div>