@props([
    'title' => '',
    'icon' => null,
    'color' => 'blue',
    'actions' => null,
])

@php
    $colors = [
        'blue' => 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400',
        'green' => 'bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400',
        'red' => 'bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400',
        'yellow' => 'bg-yellow-50 dark:bg-yellow-900/20 text-yellow-600 dark:text-yellow-400',
        'purple' => 'bg-purple-50 dark:bg-purple-900/20 text-purple-600 dark:text-purple-400',
        'indigo' => 'bg-indigo-50 dark:bg-indigo-900/20 text-indigo-600 dark:text-indigo-400',
        'pink' => 'bg-pink-50 dark:bg-pink-900/20 text-pink-600 dark:text-pink-400',
        'gray' => 'bg-gray-50 dark:bg-gray-900/20 text-gray-600 dark:text-gray-400',
    ];
    
    $headerColor = $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="border-b border-gray-100 dark:border-gray-700 bg-gradient-to-r from-gray-50 to-white dark:from-gray-800 dark:to-gray-800/70 px-6 py-4 flex justify-between items-center">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white flex items-center">
            @if($icon)
                <div class="ml-2 p-2 rounded-lg {{ $headerColor }}">
                    {{ $icon }}
                </div>
            @endif
            {{ $title }}
        </h3>
        
        @if($actions)
            <div>
                {{ $actions }}
            </div>
        @endif
    </div>
    
    <div class="p-6">
        {{ $slot }}
    </div>
</div>