components/toast.js

class CustomToast extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    position: fixed;
                    bottom: 1rem;
                    right: 1rem;
                    z-index: 1000;
                }
                .toast {
                    padding: 0.75rem 1.5rem;
                    border-radius: 0.5rem;
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
                    color: white;
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    transition: all 0.3s ease;
                    opacity: 0;
                    transform: translateY(20px);
                }
                .toast.visible {
                    opacity: 1;
                    transform: translateY(0);
                }
                .toast.info {
                    background-color: #8b5cf6;
                }
                .toast.success {
                    background-color: #10b981;
                }
                .toast.warning {
                    background-color: #f59e0b;
                }
                .toast.error {
                    background-color: #ef4444;
                }
            </style>
            <div class="toast">
                <slot></slot>
            </div>
        `;
    }

    show(message, type = 'info', duration = 3000) {
        const toast = this.shadowRoot.querySelector('.toast');
        toast.textContent = message;
        toast.className = 'toast ' + type;
        toast.classList.add('visible');
        
        setTimeout(() => {
            toast.classList.remove('visible');
            setTimeout(() => this.remove(), 300);
        }, duration);
    }
}

customElements.define('custom-toast', CustomToast);