import { ref } from 'vue';

// El estado inicial ya lo aplicó el script inline en app.blade.php (evita el
// flash); acá solo reflejamos esa clase para que el ícono del toggle arranque
// sincronizado.
const isDark = ref(document.documentElement.classList.contains('dark'));

function toggleTheme(): void {
    isDark.value = !isDark.value;
    document.documentElement.classList.toggle('dark', isDark.value);
    localStorage.setItem('theme', isDark.value ? 'dark' : 'light');
}

export function useTheme() {
    return { isDark, toggleTheme };
}