// Selecciona el botón o el elemento de "dark-mode"
const darkModeToggle = document.querySelector('.dark-mode');
const darkModeIcon = darkModeToggle?.querySelector('ion-icon');

// Función para aplicar el tema
const applyTheme = (theme) => {
    if (theme === 'dark') {
        document.body.classList.add('dark-mode');
        if (darkModeIcon) {
            darkModeIcon.setAttribute('name', 'moon-outline');
            darkModeIcon.setAttribute('style', 'color: rgb(51, 102, 255)');
        }
        darkModeToggle?.setAttribute('title', 'Switch to light theme'); // Cambiar tooltip
    } else {
        document.body.classList.remove('dark-mode');
        if (darkModeIcon) {
            darkModeIcon.setAttribute('name', 'sunny-outline');
            darkModeIcon.setAttribute('style', 'color: rgb(255, 153, 0)');
        }
        darkModeToggle?.setAttribute('title', 'Switch to dark theme'); // Cambiar tooltip
    }
};

// Cambia entre modos y guarda el tema en localStorage
darkModeToggle?.addEventListener('click', () => {
    const isDarkMode = document.body.classList.toggle('dark-mode');
    const newTheme = isDarkMode ? 'dark' : 'light';
    applyTheme(newTheme);
    localStorage.setItem('theme', newTheme);
});

// Al cargar la página, aplica el tema guardado en localStorage
window.addEventListener('DOMContentLoaded', () => {
    const savedTheme = localStorage.getItem('theme') || 'light'; // Tema predeterminado: light
    applyTheme(savedTheme);
});
