@props([
    'colspan' => 1,
    'rowspan' => 1,
    'title' => null,
    'subtitle' => null,
    'icon' => null,
    'gradient' => false
])

<div {{ $attributes->merge([
    'class' => "bento-item col-span-{$colspan} row-span-{$rowspan} " . ($gradient ? 'bg-gradient-primary' : '')
]) }}>
    @if($icon)
        <div class="icon-wrapper mb-4 text-primary">
            <i class="fa-duotone fa-{{ $icon }} fa-2xl"></i>
        </div>
    @endif

    <div class="content-layer">
        @if($title)
            <h3 class="text-xl font-bold tracking-tight text-white mb-1">{{ $title }}</h3>
        @endif
        
        @if($subtitle)
            <p class="text-slate-400 text-sm font-medium">{{ $subtitle }}</p>
        @endif

        <div class="mt-4">
            {{ $slot }}
        </div>
    </div>
    
    {{-- Micro-interaction: Subtle glow follow (Optional JS implementation later) --}}
    <div class="glow-effect"></div>
</div>