@props([
    'autoDismiss' => true,
    'timeout' => 3000,
])

<div class="flash-messages-container fixed top-4 right-4 z-50 space-y-3 max-w-sm w-full">
    <!-- Success Messages -->
    @if(session('success'))
        <x-alert
            type="success"
            :message="session('success')"
            :timeout="$autoDismiss ? $timeout : null"
            dismissible="true"
        />
    @endif

    <!-- Error Messages -->
    @if(session('error'))
        <x-alert
            type="error"
            :message="session('error')"
            :timeout="$autoDismiss ? $timeout : null"
            dismissible="true"
        />
    @endif

    <!-- Warning Messages -->
    @if(session('warning'))
        <x-alert
            type="warning"
            :message="session('warning')"
            :timeout="$autoDismiss ? $timeout : null"
            dismissible="true"
        />
    @endif

    <!-- Info Messages -->
    @if(session('info'))
        <x-alert
            type="info"
            :message="session('info')"
            :timeout="$autoDismiss ? $timeout : null"
            dismissible="true"
        />
    @endif

    <!-- Validation Errors -->
    @if($errors->any())
        @foreach($errors->all() as $error)
            <x-alert
                type="error"
                :message="$error"
                dismissible="true"
            />
        @endforeach
    @endif

    <!-- Custom slot for additional messages -->
    {{ $slot }}
</div>