@props(['type' => 'info', 'dismissible' => true, 'icon' => null])

@php
    $styles = [
        'info' => [
            'bg' => 'bg-blue-50',
            'border' => 'border-blue-200',
            'text' => 'text-blue-800',
            'icon' => $icon ?? 'fa-solid fa-info-circle',
            'icon_color' => 'text-blue-600',
        ],
        'success' => [
            'bg' => 'bg-green-50',
            'border' => 'border-green-200',
            'text' => 'text-green-800',
            'icon' => $icon ?? 'fa-solid fa-check-circle',
            'icon_color' => 'text-green-600',
        ],
        'warning' => [
            'bg' => 'bg-amber-50',
            'border' => 'border-amber-200',
            'text' => 'text-amber-800',
            'icon' => $icon ?? 'fa-solid fa-exclamation-triangle',
            'icon_color' => 'text-amber-600',
        ],
        'error' => [
            'bg' => 'bg-red-50',
            'border' => 'border-red-200',
            'text' => 'text-red-800',
            'icon' => $icon ?? 'fa-solid fa-exclamation-circle',
            'icon_color' => 'text-red-600',
        ],
    ];
    
    $style = $styles[$type] ?? $styles['info'];
@endphp

<div {{ $attributes->merge(['class' => "{$style['bg']} {$style['border']} border rounded-2xl p-5 flex items-start gap-4"]) }}
     @if($dismissible) x-data="{ show: true }" x-show="show" @endif>
    
    <div class="w-10 h-10 {{ $type === 'success' ? 'bg-green-100' : ($type === 'warning' ? 'bg-amber-100' : ($type === 'error' ? 'bg-red-100' : 'bg-blue-100')) }} rounded-xl flex items-center justify-center flex-shrink-0">
        <i class="{{ $style['icon'] }} {{ $style['icon_color'] }}"></i>
    </div>
    
    <div class="flex-1">
        <div class="{{ $style['text'] }}">
            {{ $slot }}
        </div>
    </div>
    
    @if($dismissible)
        <button @click="show = false" class="{{ $style['text'] }} opacity-60 hover:opacity-100 transition-opacity">
            <i class="fa-solid fa-xmark"></i>
        </button>
    @endif
</div>