@props([
    'variant' => 'info', // info, success, warning, error
    'title' => null,
    'dismissible' => false,
    'icon' => true,
])

@php
    $variants = [
        'info' => [
            'bg' => 'bg-blue-500/10',
            'border' => 'border-blue-500/20',
            'title' => 'text-blue-400',
            'text' => 'text-blue-300/80',
            'icon' => '<svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>',
        ],
        'success' => [
            'bg' => 'bg-emerald-500/10',
            'border' => 'border-emerald-500/20',
            'title' => 'text-emerald-400',
            'text' => 'text-emerald-300/80',
            'icon' => '<svg class="w-5 h-5 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>',
        ],
        'warning' => [
            'bg' => 'bg-amber-500/10',
            'border' => 'border-amber-500/20',
            'title' => 'text-amber-400',
            'text' => 'text-amber-300/80',
            'icon' => '<svg class="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>',
        ],
        'error' => [
            'bg' => 'bg-red-500/10',
            'border' => 'border-red-500/20',
            'title' => 'text-red-400',
            'text' => 'text-red-300/80',
            'icon' => '<svg class="w-5 h-5 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>',
        ],
    ];

    $config = $variants[$variant] ?? $variants['info'];
@endphp

<div
    x-data="{ show: true }"
    x-show="show"
    x-transition:leave="transition ease-in duration-150"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    {{ $attributes->merge(['class' => 'rounded-2xl border p-4 sm:p-5 ' . $config['bg'] . ' ' . $config['border']]) }}
>
    <div class="flex gap-3 sm:gap-4">
        {{-- Icon --}}
        @if($icon)
        <div class="flex-shrink-0">
            {!! $config['icon'] !!}
        </div>
        @endif

        {{-- Content --}}
        <div class="flex-1 min-w-0">
            @if($title)
            <h4 class="text-sm sm:text-base font-semibold {{ $config['title'] }}">{{ $title }}</h4>
            @endif
            <div class="text-sm {{ $config['text'] }} {{ $title ? 'mt-1' : '' }} leading-relaxed">
                {{ $slot }}
            </div>
        </div>

        {{-- Dismiss Button --}}
        @if($dismissible)
        <button
            @click="show = false"
            class="flex-shrink-0 p-1 rounded-lg hover:bg-white/10 {{ $config['title'] }} transition-colors"
        >
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>
        @endif
    </div>

    {{-- Optional action slot --}}
    @if(isset($action))
    <div class="mt-3 sm:mt-4 pl-9">
        {{ $action }}
    </div>
    @endif
</div>