import React, { createContext, useContext, ReactNode, ComponentType } from 'react';

import themeManager, { ThemeType } from '../helpers/themeManager';

const ThemeContext = createContext<ThemeType>(themeManager.getTheme() as ThemeType);

type ThemeProviderProps = {
  theme: ThemeType;
  children: ReactNode;
};

export const ThemeProvider: ComponentType<ThemeProviderProps> = ({ theme, children }) => {
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
};

export const useTheme = (): ThemeType => {
  return useContext(ThemeContext);
};

export default ThemeContext;