const Alert = {
    show(message, type = 'success') {
        const alert = document.createElement('div');
        alert.className = `fixed top-4 right-4 p-4 rounded-md text-white ${
            type === 'success' ? 'bg-green-500' : 'bg-red-500'
        } transition-opacity duration-500`;
        
        alert.innerHTML = `
            <div class="flex items-center">
                <span class="mr-2">
                    ${type === 'success' ? `
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                        </svg>
                    ` : `
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    `}
                </span>
                <span>${message}</span>
            </div>
        `;

        document.body.appendChild(alert);

        // Fade in
        setTimeout(() => {
            alert.style.opacity = '1';
        }, 10);

        // Fade out and remove
        setTimeout(() => {
            alert.style.opacity = '0';
            setTimeout(() => {
                document.body.removeChild(alert);
            }, 500);
        }, 3000);
    }
};