import React, { useEffect, useState } from 'react';
import { getModule } from './utils';

export const CustomElement: React.FC = (props) => {
  const [component, setComponent] = useState<any>();
  const { cdnBaseUrl } = window?.config || {};

  useEffect(() => {
    const getComponent = async () => {
      const customElement = await getModule(
        `bundle_${(props as any).customId}_latest.js`,
        `${cdnBaseUrl}/bundle_${(props as any).customId}_latest.js`,
        './ui',
      );
      customElement.displayName = 'customElement';

      setComponent(customElement(props));
    };

    getComponent();
  }, []);

  return component ?? <></>;
};

CustomElement.displayName = 'CustomElement';