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

@php
$styles = match($type) {
    'success' => [
        'bg' => 'bg-green-50',
        'border' => 'border-green-200',
        'text' => 'text-green-800',
        'icon' => '✔️',
    ],
    'error' => [
        'bg' => 'bg-red-50',
        'border' => 'border-red-200',
        'text' => 'text-red-800',
        'icon' => '❌',
    ],
    'info' => [
        'bg' => 'bg-blue-50',
        'border' => 'border-blue-200',
        'text' => 'text-blue-800',
        'icon' => 'ℹ️',
    ],
};
@endphp

<div
    x-data="{ show: true }"
    x-show="show"
    x-transition.opacity.duration.300ms
    x-init="setTimeout(() => show = false, 3500)"
    class="flex items-start gap-3 p-4 mb-6 rounded-lg border {{ $styles['bg'] }} {{ $styles['border'] }}"
>
    <div class="text-lg">{{ $styles['icon'] }}</div>

    <div class="flex-1 text-sm {{ $styles['text'] }}">
        {{ $slot }}
    </div>

    <button
        @click="show = false"
        class="text-gray-400 hover:text-gray-600"
    >
        ✕
    </button>
</div>