import React from 'react';
// eslint-disable-next-line import/no-extraneous-dependencies
import loadable from '@loadable/component';

export default function index({ module, page }) {
  const Component = () => {
    switch (module?.style) {
      case 'comparison_table': {
        if (module.cards_page_type === 'operator') {
          const ComparisonTable = loadable(() => import('../../atoms/cards/comparison-table'));
          return <ComparisonTable module={module} page={page} />;
        }
        return null;
      }
      case 'template_two': {
        const SrcollLayout = loadable(() => import('./template-two'));
        return <SrcollLayout module={module} page={page} />;
      }
      default: {
        const GridLayout = loadable(() => import('./template-one'));
        return <GridLayout module={module} page={page} />;
      }
    }
  };
  return <>{Component && <Component />}</>;
}
