import React, { createContext, useState } from 'react';
import { ThemeContextType, ThemeProviderProps, Theme } from './types';
import '../../assets/Themes/Theme.scss';

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

const ThemeProvider: React.FC<ThemeProviderProps> = ({ children, theme }) => {
  const [currentTheme, setCurrentTheme] = useState<Theme>(
    theme || 'ff-light-theme'
  );

  const applyTheme = (newTheme: Theme) => setCurrentTheme(newTheme);

  return (
    <ThemeContext.Provider
      value={{ currentTheme, setCurrentTheme, applyTheme }}
    >
      <div className={currentTheme}>{children}</div>
    </ThemeContext.Provider>
  );
};

export { ThemeContext };
export default ThemeProvider;