import React, { createContext, useContext, useEffect, useState } from 'react';

const ThemeContext = createContext({ theme: 'default', setTheme: () => {} });

export const THEMES = {
    default: {
        label: 'IT Nexus',
        desc: 'Dunkles Teal-Theme',
        preview: { bg: '#0f172a', sidebar: '#1e293b', accent: '#3fa3a3', text: '#f1f5f9' },
    },
    'cereda-desk': {
        label: 'simDesk',
        desc: 'Dunkles Violet-Theme',
        preview: { bg: '#030712', sidebar: '#0f172a', accent: '#7c5cf6', text: '#f1f5f9' },
    },
};

export function ThemeProvider({ children }) {
    const [theme, setThemeState] = useState(() => localStorage.getItem('it-nexus-theme') || 'default');

    const setTheme = (t) => {
        setThemeState(t);
        localStorage.setItem('it-nexus-theme', t);
    };

    useEffect(() => {
        const html = document.documentElement;
        if (theme === 'default') {
            html.removeAttribute('data-theme');
        } else {
            html.setAttribute('data-theme', theme);
        }
    }, [theme]);

    return (
        <ThemeContext.Provider value={{ theme, setTheme }}>
            {children}
        </ThemeContext.Provider>
    );
}

export const useTheme = () => useContext(ThemeContext);
