import { ReactNode } from 'react';

import { ThemeProvider } from '@material-hu/mui/styles';

import useSettings from 'src/contexts/SettingsContext';
import { createTheme } from 'src/theme';

type ThemeWrapperProps = {
  children: ReactNode;
};

const ThemeWrapper = ({ children }: ThemeWrapperProps) => {
  const { settings } = useSettings();
  const theme = createTheme({
    responsiveFontSizes: settings.responsiveFontSizes,
    roundedCorners: settings.roundedCorners,
    theme: settings.theme,
    primaryColor: settings.primary,
  });

  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};

export default ThemeWrapper;