const ConfigProvider: React.FC<ConfigProviderProps> & {
  ConfigContext: typeof ConfigContext;
  SizeContext: typeof SizeContext;
  config: typeof setGlobalConfig;
} = props => {
  React.useEffect(() => {
    if (props.direction) {
      message.config({
        rtl: props.direction === 'rtl',
      });
      notification.config({
        rtl: props.direction === 'rtl',
      });
    }
  }, [props.direction]);
  
  // getThemeVariables() -> return ':root { --primary-color: #00a; ... }
  const variables = props.config.theme ? getThemeVariables(getGlobalPrefixCls(), props.theme) : null

  return (
    <>
      {variables && <style>{variables}</style>}
      <LocaleReceiver>
        {(_, __, legacyLocale) => (
          <ConfigConsumer>
            {context => (
              <ProviderChildren
                parentContext={context}
                legacyLocale={legacyLocale as Locale}
                {...props}
              />
            )}
          </ConfigConsumer>
        )}
      </LocaleReceiver>
    </>
  );
};