@props(['title', 'description' => '', 'icon' => null])

<div
    class="px-4 py-5 sm:px-6 sm:py-6 bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-gray-900 dark:to-gray-800 rounded-2xl mb-8 shadow-md transition-colors">
    <h2 class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-white mb-2 flex items-center gap-2">
        @if ($icon)
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-blue-600 dark:text-indigo-400" fill="none"
                viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $icon }}" />
            </svg>
        @endif
        <span class="truncate">{{ $title }}</span>
    </h2>
    @if ($description)
        <p class="text-gray-600 dark:text-gray-300 mb-6 text-sm sm:text-base">{{ $description }}</p>
    @endif
    <div class="w-full">
        {{ $slot }}
    </div>
</div>