import { useBop } from "../../../../hooks/election/index.js";
import { IfActive } from "../../../application/index.js";
import ModuleTitle from "../../ModuleTitle/index.js";
import cx from "../../../../utils/css/cx.js";
import BalanceOfPowerBar from "../../BalanceOfPowerBar/index.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const BOPCard = function BOPCard(props) {
  const {
    config,
    disableModuleTitle,
    disableCards
  } = props;
  const {
    bopId,
    eyebrow,
    disableLastUpdated,
    ...restBopProps
  } = config;
  const bop = useBop(bopId);
  const hideLastUpdated = disableLastUpdated || !disableModuleTitle;
  const hasTitle = !hideLastUpdated || eyebrow;
  return <div className={cls('bopCard', {
    card: !disableCards
  })}>
      <IfActive active={!!hasTitle}>
        <ModuleTitle eyebrow={eyebrow} disableBorder disableLastUpdated={hideLastUpdated} />
      </IfActive>
      <BalanceOfPowerBar bop={bop} height="24" markCenter isSecondary hideNotUpLabels disableFlips {...restBopProps} />
    </div>;
};
export default BOPCard;