@props(['type' => 'info'])
@php($styles = [
    'success' => 'bg-emerald-50 text-emerald-800 ring-emerald-600/20 dark:bg-emerald-500/10 dark:text-emerald-300 dark:ring-emerald-500/30',
    'error'   => 'bg-red-50 text-red-800 ring-red-600/20 dark:bg-red-500/10 dark:text-red-300 dark:ring-red-500/30',
    'warning' => 'bg-amber-50 text-amber-800 ring-amber-600/20 dark:bg-amber-500/10 dark:text-amber-300 dark:ring-amber-500/30',
    'info'    => 'bg-sky-50 text-sky-800 ring-sky-600/20 dark:bg-sky-500/10 dark:text-sky-300 dark:ring-sky-500/30',
])
@php($icons = [
    'success' => 'check-circle',
    'error'   => 'x-circle',
    'warning' => 'exclamation-triangle',
    'info'    => 'info-circle',
])
<div {{ $attributes->merge(['class' => 'flex items-start gap-3 rounded-xl px-4 py-3 text-sm ring-1 '.$styles[$type]]) }} role="alert">
    <x-icon :name="$icons[$type]" class="mt-0.5 h-5 w-5 shrink-0" />
    <div class="flex-1">{{ $slot }}</div>
</div>