import React, { ComponentType, FC, PropsWithChildren } from 'react';
import { ChakraProvider } from '@chakra-ui/react';

import { default as landingTheme } from './theme-config';
import Fonts from './Fonts';
import { toastOptions } from './toast-options';

export const LandingThemeProvider: FC<PropsWithChildren> = ({ children }) => {
  return (
    <ChakraProvider theme={landingTheme} toastOptions={toastOptions}>
      <Fonts />
      {children}
    </ChakraProvider>
  );
};

export function withLandingThemeProvider<T extends JSX.IntrinsicAttributes>(WrappedComponent: ComponentType<T>) {
  const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';

  const ComponentWithLandingThemeProvider = (props: T) => {
    return (
      <LandingThemeProvider>
        <WrappedComponent {...props} />
      </LandingThemeProvider>
    );
  };

  ComponentWithLandingThemeProvider.displayName = `withLandingThemeProvider(${displayName})`;

  return ComponentWithLandingThemeProvider;
}