@props([
    'dismissible' => true,
    'timeout' => null,
])

<div class="inline-messages-container space-y-3 max-w-sm w-full">
    <!-- Success Messages -->
    @if(session('success'))
        <x-alert
            type="success"
            :message="session('success')"
            :timeout="$timeout"
            :dismissible="$dismissible"
        />
    @endif

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

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

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

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

    @endif

    {{ $slot }}
</div>