@props(['type' => 'success', 'icon' => null])

@php
    $classes = [
        'success' => 'bg-emerald-50 border-emerald-200 text-emerald-800 dark:bg-emerald-950/20 dark:border-emerald-900/30 dark:text-emerald-400',
        'danger' => 'bg-rose-50 border-rose-200 text-rose-700 dark:bg-rose-950/20 dark:border-rose-900/30 dark:text-rose-400',
        'error' => 'bg-rose-50 border-rose-200 text-rose-700 dark:bg-rose-950/20 dark:border-rose-900/30 dark:text-rose-400',
        'warning' => 'bg-amber-50 border-amber-200 text-amber-800 dark:bg-amber-950/20 dark:border-amber-900/30 dark:text-amber-400',
        'info' => 'bg-blue-50 border-blue-200 text-blue-800 dark:bg-blue-950/20 dark:border-blue-900/30 dark:text-blue-400',
    ];
    $alertClass = $classes[$type] ?? $classes['info'];
@endphp

<div {{ $attributes->merge(['class' => 'flex items-start gap-3 rounded-2xl border p-4 shadow-soft transition-all duration-200 ' . $alertClass]) }} role="alert">
    @if($icon)<i class="bi {{ $icon }} text-lg leading-none mt-0.5"></i>@endif
    <div class="flex-1 text-sm font-medium">
        {{ $slot }}
    </div>
</div>