@props([
    'title' => '',
    'value' => '0',
    'icon' => null,
    'color' => 'blue',
    'link' => null,
    'linkText' => 'عرض المزيد',
])

@php
    $colors = [
        'blue' => [
            'bg' => 'bg-blue-100 dark:bg-blue-900/20',
            'text' => 'text-blue-600 dark:text-blue-400',
            'hover' => 'group-hover:bg-blue-200 dark:group-hover:bg-blue-800/30',
            'gradient' => 'from-blue-50/50 to-transparent dark:from-blue-900/10 dark:to-transparent',
        ],
        'green' => [
            'bg' => 'bg-green-100 dark:bg-green-900/20',
            'text' => 'text-green-600 dark:text-green-400',
            'hover' => 'group-hover:bg-green-200 dark:group-hover:bg-green-800/30',
            'gradient' => 'from-green-50/50 to-transparent dark:from-green-900/10 dark:to-transparent',
        ],
        'red' => [
            'bg' => 'bg-red-100 dark:bg-red-900/20',
            'text' => 'text-red-600 dark:text-red-400',
            'hover' => 'group-hover:bg-red-200 dark:group-hover:bg-red-800/30',
            'gradient' => 'from-red-50/50 to-transparent dark:from-red-900/10 dark:to-transparent',
        ],
        'yellow' => [
            'bg' => 'bg-yellow-100 dark:bg-yellow-900/20',
            'text' => 'text-yellow-600 dark:text-yellow-400',
            'hover' => 'group-hover:bg-yellow-200 dark:group-hover:bg-yellow-800/30',
            'gradient' => 'from-yellow-50/50 to-transparent dark:from-yellow-900/10 dark:to-transparent',
        ],
        'purple' => [
            'bg' => 'bg-purple-100 dark:bg-purple-900/20',
            'text' => 'text-purple-600 dark:text-purple-400',
            'hover' => 'group-hover:bg-purple-200 dark:group-hover:bg-purple-800/30',
            'gradient' => 'from-purple-50/50 to-transparent dark:from-purple-900/10 dark:to-transparent',
        ],
        'indigo' => [
            'bg' => 'bg-indigo-100 dark:bg-indigo-900/20',
            'text' => 'text-indigo-600 dark:text-indigo-400',
            'hover' => 'group-hover:bg-indigo-200 dark:group-hover:bg-indigo-800/30',
            'gradient' => 'from-indigo-50/50 to-transparent dark:from-indigo-900/10 dark:to-transparent',
        ],
        'pink' => [
            'bg' => 'bg-pink-100 dark:bg-pink-900/20',
            'text' => 'text-pink-600 dark:text-pink-400',
            'hover' => 'group-hover:bg-pink-200 dark:group-hover:bg-pink-800/30',
            'gradient' => 'from-pink-50/50 to-transparent dark:from-pink-900/10 dark:to-transparent',
        ],
        'amber' => [
            'bg' => 'bg-amber-100 dark:bg-amber-900/20',
            'text' => 'text-amber-600 dark:text-amber-400',
            'hover' => 'group-hover:bg-amber-200 dark:group-hover:bg-amber-800/30',
            'gradient' => 'from-amber-50/50 to-transparent dark:from-amber-900/10 dark:to-transparent',
        ],
    ];
    
    $colorSet = $colors[$color] ?? $colors['blue'];
@endphp

<div {{ $attributes->merge(['class' => 'bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg group hover:shadow-md transition-all duration-300']) }}>
    <div class="p-6 relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-r {{ $colorSet['gradient'] }} opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="flex items-center relative z-10">
            <div class="p-3 rounded-full {{ $colorSet['bg'] }} {{ $colorSet['text'] }} {{ $colorSet['hover'] }} mr-4 group-hover:scale-110 transition-transform duration-300">
                @if($icon)
                    {{ $icon }}
                @else
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                    </svg>
                @endif
            </div>
            <div>
                <div class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ $title }}</div>
                <div class="text-2xl font-bold text-gray-800 dark:text-white">{{ $value }}</div>
            </div>
        </div>
        
        @if($link)
            <div class="mt-4">
                <a href="{{ $link }}" class="text-sm font-medium {{ $colorSet['text'] }} hover:underline flex items-center justify-end">
                    {{ $linkText }}
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 group-hover:translate-x-1 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
                    </svg>
                </a>
            </div>
        @endif
    </div>
</div>