/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import PropTypes from 'prop-types';
import ModuleIntro from '~molecules/content';
import styles from './styles.module.scss';
import ModuleTitle from '../../../../gatsby-core-theme/components/atoms/module-title';
import SeeMore from '../../../atoms/see-more';

const ModuleIntroduction = ({ module, showSeeMore = false }) => {
  const anchorLabel = module?.anchor_slug && module?.anchor_slug;

  const showModuleIntro = module?.module_introduction && module?.module_introduction !== '<p></p>';

  return (
    <div className={ModuleIntro ? '' : styles.noIntroModuleCards}>
      <ModuleTitle
        module={module}
        anchorLabel={module.name === 'archive' ? anchorLabel : null}
        showMoreLink={!ModuleIntro}
      />
      {showModuleIntro && (
        <ModuleIntro
          isModuleIntroduction={module?.module_introduction}
          module={{ value: module?.module_introduction }}
        />
      )}
      {showSeeMore && ModuleIntro && <SeeMore module={module} />}
    </div>
  );
};

ModuleIntroduction.propTypes = {
  module: PropTypes.shape({
    anchor_label: PropTypes.string,
    anchor_slug: PropTypes.string,
    name: PropTypes.string.isRequired,
    module_introduction: PropTypes.string,
    see_more_link: PropTypes.shape({
      path: PropTypes.string,
      title: PropTypes.string,
    }),
  }),
  showSeeMore: PropTypes.bool,
};

export default ModuleIntroduction;
