import PropTypes from 'prop-types';
import { IfActive } from "../../application/index.js";
import ModuleTitle from "../ModuleTitle/index.js";
import cx from "../../../utils/css/cx.js";
import BOPCard from './BOPCard';
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const BOPRecirc = function BOPRecirc(props) {
  const {
    bops,
    headline,
    description,
    eyebrow,
    reporterNote,
    disableModuleTitle,
    disableCards
  } = props;
  return <div>
      <IfActive active={!disableModuleTitle}>
        <ModuleTitle headline={headline} description={description} eyebrow={eyebrow} reporterNote={reporterNote} disableBorder />
      </IfActive>
      <div className={cls('bops', {
      disableCards
    })}>
        {bops.map(bop => <BOPCard key={bop.bopId} disableModuleTitle={disableModuleTitle} disableCards={disableCards} config={bop} />)}
      </div>
    </div>;
};
BOPRecirc.defaultProps = {
  bops: [],
  headline: undefined,
  description: undefined,
  eyebrow: undefined,
  reporterNote: undefined,
  disableModuleTitle: false,
  disableCards: false
};
BOPRecirc.propTypes = {
  /**
   * An array of BOP card configurations. Each BOP can specify the `bopId` of
   * the BOP and an eyebrow configuration for the single card.
   */
  bops: PropTypes.arrayOf(PropTypes.shape({
    bopId: PropTypes.string,
    office: PropTypes.string,
    eyebrow: PropTypes.shape({}),
    disableLastUpdated: PropTypes.bool
  })),
  /**
   * Headline for the recirc collection
   */
  headline: PropTypes.string,
  /**
   * Description for the recirc collection
   */
  description: PropTypes.string,
  /**
   * Eyebrow configuration for the recirc collection
   */
  eyebrow: PropTypes.shape({}),
  /**
   * Reporter comment for the recirc collection
   */
  reporterNote: PropTypes.shape({}),
  /**
   * Disable the timestamp, eyebrow, headline, description
   */
  disableModuleTitle: PropTypes.bool,
  disableCards: PropTypes.bool
};
export default BOPRecirc;