@props(['type' => 'success', 'message' => null, 'dismissible' => true])

@php
    $classes = match($type) {
        'success'        => 'bg-green-50 border-green-200 text-green-800',
        'danger', 'error'=> 'bg-red-50 border-red-200 text-red-800',
        'warning'        => 'bg-amber-50 border-amber-200 text-amber-800',
        'info'           => 'bg-blue-50 border-blue-200 text-blue-800',
        default          => 'bg-slate-50 border-slate-200 text-slate-800',
    };

    $iconPath = match($type) {
        'success'        => 'M5 13l4 4L19 7',
        'danger', 'error'=> 'M6 18L18 6M6 6l12 12',
        'warning'        => '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',
        default          => 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
    };
@endphp

<div
    {{ $attributes->merge(['class' => "flex items-start gap-3 p-4 rounded-lg border {$classes}"]) }}
    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"
>
    <svg class="w-4 h-4 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $iconPath }}"/>
    </svg>

    <span class="flex-1 text-sm">{{ $message ?? $slot }}</span>

    @if ($dismissible)
        <button type="button" @click="show = false" class="flex-shrink-0 opacity-60 hover:opacity-100 transition-opacity">
            <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>