import get from 'lodash/get';
import BalanceOfPowerBar from "../../../BalanceOfPowerBar/index.js";
import ElectionIcon from "../../../ElectionIcon/index.js";
import { useBop } from "../../../../../hooks/election/index.js";
import cx from "../../../../../utils/css/cx.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const InlineBOP = function InlineBOP(props) {
  const {
    bopId
  } = props;
  const bop = useBop(bopId);
  const winner = get(bop, 'winner');
  if (!bop) return null;
  if (winner) {
    return <span className={cls('winner', winner.party)}>
        <span className={classes.icon}>
          <ElectionIcon type="OutcomeWin" size="3" />
        </span>
        <span>
          {winner.label}
        </span>
      </span>;
  }
  return <span>
      <BalanceOfPowerBar bop={bop} labelFormat="none" height="12" borderWidth="1" markCenter disableFlips />
    </span>;
};
export default InlineBOP;