AIRegulation-DocAnalysis/frontend/src/contexts/ThemeContext.tsx

import React, { useEffect, useState, type ReactNode } from 'react';

import { darkTheme, lightTheme } from '../types/theme';
import { ThemeContext } from './theme-context';

interface ThemeProviderProps {
  children: ReactNode;
}

export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
  const [isDark, setIsDark] = useState<boolean>(true);
  const theme = isDark ? darkTheme : lightTheme;

  const toggleTheme = () => {
    setIsDark((prev) => !prev);
  };

  useEffect(() => {
    document.documentElement.classList.toggle('dark', isDark);
    document.body.classList.toggle('dark-mode', isDark);

    if (isDark) {
      document.body.style.background = '#0a0a12';
      return;
    }

    document.body.style.background = '#ffffff';
  }, [isDark]);

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