@props([
    'icon' => null,
    'color' => 'cyan', // emerald, cyan, amber, purple, blue
])

@php
    $colors = [
        'emerald' => ['bg' => 'bg-emerald-500/10', 'icon' => 'text-emerald-400'],
        'cyan' => ['bg' => 'bg-cyan-500/10', 'icon' => 'text-cyan-400'],
        'amber' => ['bg' => 'bg-amber-500/10', 'icon' => 'text-amber-400'],
        'purple' => ['bg' => 'bg-purple-500/10', 'icon' => 'text-purple-400'],
        'blue' => ['bg' => 'bg-blue-500/10', 'icon' => 'text-blue-400'],
    ];
    $colorConfig = $colors[$color] ?? $colors['cyan'];
@endphp

<div {{ $attributes->merge(['class' => 'p-4 glass-card rounded-xl']) }}>
    <div class="flex items-start gap-3">
        @if($icon)
        <div class="p-2 {{ $colorConfig['bg'] }} rounded-lg flex-shrink-0">
            <div class="{{ $colorConfig['icon'] }}">
                {!! $icon !!}
            </div>
        </div>
        @endif
        <div class="text-sm text-db-text-secondary leading-relaxed">
            {{ $slot }}
        </div>
    </div>
</div>