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

<div class="bg-white/80 backdrop-blur-sm rounded-xl shadow-lg border border-{{ $color }}-100 overflow-hidden"
     x-data
     @mouseenter="$el.style.transform='scale(1.05)'; $el.style.boxShadow='0 20px 40px rgba(0,0,0,0.15)'"
     @mouseleave="$el.style.transform='scale(1)'; $el.style.boxShadow=''"
     style="transition: transform 400ms cubic-bezier(0.34,1.56,0.64,1), box-shadow 400ms cubic-bezier(0.34,1.56,0.64,1)">

    @if($title || $icon)
        <div class="flex items-center gap-3 px-5 pt-5 pb-3">
            @if($icon)
                <span class="text-{{ $color }}-500 text-xl">{{ $icon }}</span>
            @endif
            @if($title)
                <h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wide">{{ $title }}</h3>
            @endif
        </div>
    @endif

    <div class="px-5 pb-5">
        {{ $slot }}
    </div>
</div>
