import IfActive from "../../../../../application/IfActive/index.js";
import cx from "../../../../../../utils/css/cx.js";
import formatNumber from "../../../../../../utils/election/formatNumber/index.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const CellCount = function CellCount(props) {
  const {
    total,
    idx,
    anyMetThreshold,
    remaining,
    isDropped,
    componentWidth,
    highestCandidateTotal
  } = props;
  const activeAwayNote = highestCandidateTotal > 0 && componentWidth >= 252 && !anyMetThreshold;
  return <div role="cell" className={cls('cell-count', {
    isDropped
  })}>
      <div>{formatNumber(total)}</div>
      <IfActive active={activeAwayNote}>
        <div className={cls('remaining-count')}>
          {formatNumber(remaining)}
          <IfActive active={idx === 0}>
            {' '}
            away
          </IfActive>
        </div>
      </IfActive>
    </div>;
};
export default CellCount;