<div x-data="{
    toasts: [],
    addToast(message, type = 'success') {
        let id = Date.now();
        this.toasts.push({ id, message, type });

        // Remove o toast após 3 segundos
        setTimeout(() => this.removeToast(id), 7000);
    },
    removeToast(id) {
        this.toasts = this.toasts.filter(toast => toast.id !== id);
    }
}" @notify.window="addToast($event.detail.message, $event.detail.type || 'success')"
    @notifyError.window="addToast($event.detail.message, $event.detail.type || 'error')"
    class="fixed top-5 right-5 z-50000 flex w-full max-w-xs flex-col space-y-3">
    <template x-for="toast in toasts" :key="toast.id">
        <div x-show="true" x-transition:enter="transform ease-out duration-300 transition"
            x-transition:enter-start="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
            x-transition:enter-end="translate-y-0 opacity-100 sm:translate-x-0"
            x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0" class="toast-card"
            :class="{ 'toast-success': toast.type === 'success', 'toast-error': toast.type === 'error' }">
            <div x-show="toast.type === 'success'" class="toast-icon-success">
                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
            </div>
            <div x-show="toast.type === 'error'" class="toast-icon-error">
                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
                </svg>
            </div>

            <p class="toast-message" x-text="toast.message"></p>

            <button @click="removeToast(toast.id)" class="toast-close-button cursor-pointer">
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                    <path
                        d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
                </svg>
            </button>
        </div>
    </template>
</div>