import cx from "../../../../utils/css/cx.js";
import SecondaryBop from '../SecondaryBop';
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const SecondaryContainer = function SecondaryContainer(props) {
  const {
    configs,
    isSplash
  } = props;
  if (!configs || configs.length === 0) {
    return null;
  }
  return <div className={cls('container', {
    isSplash
  })}>
      {configs.map(config => <SecondaryBop key={config.bopId || config.office} id={config.bopId || config.office} eyebrow={config.eyebrow} headline={config.headline} reporterNote={config.reporterNote} demName={config.demName} gopName={config.gopName} isSplash={isSplash} headlineLink={config.headlineLink} office={config.office} collectionId={config.collectionId} />)}
    </div>;
};
export default SecondaryContainer;