<div id="toast"
    x-data="{
    isVisible: false,
    timeoutId: null,

    show() {
        this.isVisible = true;
        // Clear any existing timeout
        if (this.timeoutId) {
            clearTimeout(this.timeoutId);
        }

        // Auto-hide after duration
        this.timeoutId = setTimeout(() => {
            this.hide();
        }, 3000);
    },

    hide() {
        this.isVisible = false;
    }
  }"
    @show-toast.window="
    if($event.detail === '{{ id }}' || $event.detail.value === '{{ id }}') {
        show();
    } else {
    console.error('Toast failed to show');
    }"
    x-show="isVisible"
    x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="opacity-0 transform translate-y-full"
    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-x-0"
    x-transition:leave-end="opacity-0 transform translate-x-full"
    class="{% if class %}{{ class }}{% endif %} fixed bottom-5 right-5"
    role="alert"
    {{ attrs }}
>
  {{ slot }}
</div>
