import loadable from '@loadable/component';

const validIconNames = ['Close', 'Stop', 'Play', 'Image'];

export const loadIcon = (iconName) => {
  // validate that this icon will exist
  if (!validIconNames.includes(iconName)) return null;
  try {
    return loadable.lib(() => import(/* webpackExclude: /\.spec\.js$/ */ `../${iconName}`));
  } catch (error) {
    console.warn(`Failed to load icon ${iconName}. ${error}`);
    return null;
  }
};

const Component = ({iconName}) => {
  const LoadableIcon = loadIcon(iconName) || null; // we validate inside the function so no need here
  return (
      {LoadableIcon && <LoadableIcon>{({ default: Icon }) => <Icon />}</LoadableIcon>}
   );
}