import React from 'react';
// eslint-disable-next-line import/no-extraneous-dependencies
import ModuleIntroduction from './module-introduction';
import SeeMore from '../../atoms/see-more';
import OperatorsTable from '../../atoms/cards/operators-table';
import ComparisonTable from '../../atoms/cards/comparison-table';
import SrcollLayout from './template-two';
import GridLayout from './template-one';

export default function index({ module, page, seeMoreButtonDown = false }) {
  const Component = () => {
    switch (module?.style) {
      case 'stack_table': {
        if (module.cards_page_type === 'operator') {
          return <OperatorsTable module={module} page={page} />;
        }
        return null;
      }
      case 'comparison_table': {
        if (module.cards_page_type === 'operator') {
          return <ComparisonTable module={module} page={page} />;
        }
        return null;
      }
      case 'template_two': {
        return <SrcollLayout module={module} page={page} />;
      }
      default: {
        return <GridLayout module={module} page={page} />;
      }
    }
  };
  return (
    <>
      <ModuleIntroduction showSeeMore={!seeMoreButtonDown} module={module} />
      {Component && <Component />}
      {seeMoreButtonDown && <SeeMore module={module} />}
    </>
  );
}
