@props([
    'type' => 'info',
    'message' => '',
    'dismissible' => true,
    'timeout' => null, // Auto-dismiss after milliseconds
])

@php
    $typeClasses = [
        'success' => 'bg-green-100 border-green-400 text-green-700',
        'error' => 'bg-red-100 border-red-400 text-red-700',
        'warning' => 'bg-yellow-100 border-yellow-400 text-yellow-700',
        'info' => 'bg-blue-100 border-blue-400 text-blue-700',
    ];

    $icons = [
        'success' => 'M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z',
        'error' => 'M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z',
        'warning' => 'M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z',
        'info' => 'M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z',
    ];

    $iconClasses = [
        'success' => 'text-green-500',
        'error' => 'text-red-500',
        'warning' => 'text-yellow-500',
        'info' => 'text-blue-500',
    ];
    $timeoutValue = is_numeric($timeout) ? (int)$timeout : null;
@endphp
<div
    x-data="{
        show: true,
        init() {
            @if($timeoutValue)
            setTimeout(() => {
                this.show = false;
            }, {{ $timeoutValue }});
            @endif
        }
    }"
    x-show="show"
    x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="opacity-0 transform -translate-y-2"
    x-transition:enter-end="opacity-100 transform translate-y-0"
    x-transition:leave="transition ease-in duration-200"
    x-transition:leave-start="opacity-100 transform translate-y-0"
    x-transition:leave-end="opacity-0 transform -translate-y-2"
    class="alert-container max-w-sm w-full"
    role="alert"
    aria-live="assertive"
>
    <div class="{{ $typeClasses[$type] ?? $typeClasses['info'] }} border px-4 py-3 rounded-lg relative shadow-lg flex items-start mb-3">
        <!-- Icon -->
        <span class="{{ $iconClasses[$type] ?? $iconClasses['info'] }} mr-3 mt-1 flex-shrink-0">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="{{ $icons[$type] ?? $icons['info'] }}" clip-rule="evenodd"></path>
            </svg>
        </span>

        <!-- Message -->
        <div class="flex-1">
            @if(isset($title))
                <p class="font-bold">{{ $title }}</p>
            @endif
            <p class="text-sm">{!! $message  !!}</p>
            {{ $slot }}
        </div>

        <!-- Dismiss Button -->
        @if($dismissible)
            <button
                @click="show = false"
                class="ml-4 mt-1 text-gray-500 hover:text-gray-700 focus:outline-none"
                aria-label="Close alert"
            >
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        @endif
    </div>
</div>