import ModuleEyebrow from "../../ModuleEyebrow/index.js";
import { useBop } from "../../../../hooks/election/index.js";
import BalanceOfPowerBar from "../../BalanceOfPowerBar/index.js";
import BalanceOfGovernorsBar from "../../BalanceOfGovernorsBar/index.js";
import ElectionLink from "../../ElectionLink/index.js";
import cx from "../../../../utils/css/cx.js";
import { bodyShortHeadline } from "../../../../utils/election/autotext/index.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const SecondaryBop = function SecondaryBop(props) {
  const {
    headline,
    eyebrow,
    id,
    demName,
    gopName,
    isSplash,
    headlineLink,
    office,
    collectionId
  } = props;
  const bop = useBop(id);
  const autoHeadline = bodyShortHeadline({
    office,
    bop
  });
  const regularBar = <BalanceOfPowerBar bop={bop} height={32} demName={demName} gopName={gopName} isSecondary hideNotUpLabels markCenter disableFlips />;
  const govsBar = <BalanceOfGovernorsBar collectionId={collectionId} height={32} forceSimpler />;
  const bar = office === 'governor' ? govsBar : regularBar;
  return <div className={cls('container', {
    isSplash
  })}>
      <ModuleEyebrow {...eyebrow} />

      <h2 className={classes.title}>
        <ElectionLink to={headlineLink}>
          {headline || autoHeadline}
        </ElectionLink>
      </h2>

      {bar}
    </div>;
};
export default SecondaryBop;