@props([
    'toasts' => [],
])

@php
    $normalizedToasts = collect($toasts)
        ->filter(fn ($toast) => filled($toast['message'] ?? null) || filled($toast['title'] ?? null))
        ->map(function ($toast) {
            $type = $toast['type'] ?? 'info';

            return [
                'type' => in_array($type, ['success', 'error', 'warning', 'info'], true) ? $type : 'info',
                'title' => $toast['title'] ?? null,
                'message' => $toast['message'] ?? null,
                'duration' => $toast['duration'] ?? 5200,
            ];
        });
@endphp

<div class="ui-toast-viewport" data-ui-toast-viewport aria-live="polite" aria-atomic="false">
    @foreach ($normalizedToasts as $toast)
        <x-ui.toast
            :type="$toast['type']"
            :title="$toast['title']"
            :message="$toast['message']"
            :duration="$toast['duration']"
            style="--toast-index: {{ $loop->index }}"
        />
    @endforeach
</div>