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

@php
    $icons = [
        'info'    => '<svg class="w-5 h-5 text-blue-500" 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' => '<svg class="w-5 h-5 text-green-500" 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' => '<svg class="w-5 h-5 text-amber-500" 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>',
        'danger'  => '<svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>',
    ];
    $tone = match ($type) {
        'success' => 'border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-950/50 dark:text-green-200',
        'warning' => 'border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-950/50 dark:text-amber-200',
        'danger' => 'border-red-200 bg-red-50 text-red-800 dark:border-red-800 dark:bg-red-950/50 dark:text-red-200',
        default => 'border-blue-200 bg-blue-50 text-blue-800 dark:border-blue-800 dark:bg-blue-950/50 dark:text-blue-200',
    };
    $usedIcon = $icon ?? ($icons[$type] ?? $icons['info']);
    $base = 'flex items-start gap-3 rounded-xl border p-4 text-sm ' . $tone;
@endphp

<div
    @if($dismissible)
    x-data="{ show: true }"
    x-show="show"
    x-transition:leave="transition-opacity duration-300"
    x-transition:leave-end="opacity-0"
    @endif
    role="alert"
    {{ $attributes->merge(['class' => $base]) }}
>
    <span class="mt-0.5 flex-shrink-0">{!! $usedIcon !!}</span>

    <div class="min-w-0 flex-1">
        @if($title)
            <p class="mb-0.5 font-semibold">{{ $title }}</p>
        @endif
        <div class="text-sm opacity-90">{{ $slot }}</div>
    </div>

    @if($dismissible)
        <button
            @click="show = false"
            type="button"
            class="ml-auto flex-shrink-0 opacity-60 transition-opacity hover:opacity-100"
            aria-label="Dismiss"
        >
            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
        </button>
    @endif
</div>