import React from 'react';
import Font from '../Font';
import Favicon from '../Favicon';
import type { ThemeName } from '@lendi-ui/commons/utils';
import { setThemeName } from '../../utils';

/**
 * @deprecated Deprecated since 0.2.3.
 * Please remove & uninstall LUIProvider, and use `<Theme name={'lendi'} >` instead
 *
 * @example
 * import { Theme } from '@lendi/ui';
 *
 * return (
 *   <Theme name={'lendi'} >
 *     <App />
 *   </Theme>
 * )
 */
export const LUIProvider = ({
  children,
  themeName,
  disableFallbackFonts = false,
}: {
  children: any;
  themeName: ThemeName;
  disableFallbackFonts?: boolean;
}) => {
  // Run runtime setThemeName to apply theming data attribute
  setThemeName(themeName);

  return (
    <>
      <Favicon themeName={themeName} />
      <Font themeName={themeName} disableFallbackFonts={disableFallbackFonts}>
        {children}
      </Font>
    </>
  );
};

export default LUIProvider;