import { useEffect, useState } from 'react';

const useTheme = () => {
    const [theme, setTheme] = useState<string>('dark');

    const toggleTheme = () => {
        const newTheme = theme === 'dark' ? 'corporate' : 'dark';
        setTheme(newTheme);
        localStorage.setItem('theme', newTheme);
        const html = document.querySelector('html');
        if (html) {
            html.setAttribute('data-theme', newTheme);
            if (newTheme === 'dark') {
                html.classList.add('dark');
            } else {
                html.classList.remove('dark');
            }
        }
    };

    useEffect(() => {
        const html = document.querySelector('html');
        const localTheme = localStorage.getItem('theme') || 'dark';

        setTheme(localTheme);

        if (html) {
            html.setAttribute('data-theme', localTheme);
            if (localTheme === 'dark') {
                html.classList.add('dark');
            } else {
                html.classList.remove('dark');
            }
        }
    }, []);

    return { theme, toggleTheme };
};

export default useTheme;
