import { useMemo } from 'react';

import { ThemeProvider } from '@mui/material';

import { createHuGoTheme } from '../theme/hugo';

/** Creates a HuGo MUI theme and returns a ThemeProvider component for it. */
function useHuGoTheme(options?: {
  mode?: 'light' | 'dark';
  baseColor?: string;
}) {
  return useMemo(() => {
    const newTheme = createHuGoTheme(options);

    const HuGoThemeProvider = ({ children }: { children: React.ReactNode }) => (
      <ThemeProvider theme={newTheme}>{children}</ThemeProvider>
    );
    HuGoThemeProvider.displayName = 'HuGoThemeProvider';
    return { HuGoThemeProvider };
  }, [options?.mode, options?.baseColor]);
}

export { useHuGoTheme };