@props([
    'variant' => 'info', // success, danger, warning, info
    'icon' => null,
])

@php
    $variants = [
        'success' => 'bg-emerald-500/15 border-emerald-500/30 text-emerald-300',
        'danger'  => 'bg-red-500/15 border-red-500/30 text-red-300',
        'warning' => 'bg-amber-500/15 border-amber-500/30 text-amber-300',
        'info'    => 'bg-sky-500/15 border-sky-500/30 text-sky-300',
    ];

    $defaultIcons = [
        'success' => 'fa-solid fa-circle-check',
        'danger'  => 'fa-solid fa-triangle-exclamation',
        'warning' => 'fa-solid fa-circle-exclamation',
        'info'    => 'fa-solid fa-circle-info',
    ];

    $selectedIcon = $icon ?? ($defaultIcons[$variant] ?? $defaultIcons['info']);
    $variantClass = $variants[$variant] ?? $variants['info'];
@endphp

<div {{ $attributes->merge(['class' => "flex items-start gap-2.5 px-4 py-3 border rounded-xl text-xs font-medium {$variantClass}"]) }}>
    @if($selectedIcon)
        <i class="{{ $selectedIcon }} text-sm mt-0.5 shrink-0"></i>
    @endif
    <div class="flex-1 leading-relaxed">
        {{ $slot }}
    </div>
</div>