import IfActive from "../../../../application/IfActive/index.js";
import CommaAnd from "../../../../typography/CommaAnd/index.js";
import CandidateName from "../../../CandidateName/index.js";
import { formatNumber } from "../../../../../utils/election/index.js";
import classes from './styles.module.scss';
const CandidatesNote = function CandidatesNote(props) {
  const {
    candidates
  } = props;
  if (!candidates || candidates.length < 1) return null;
  const stillIn = [];
  const dropped = [];
  candidates.forEach(c => {
    if (c.isDropped) {
      dropped.push(c);
    } else {
      stillIn.push(c);
    }
  });
  return <div className={classes.note}>
      <IfActive active={stillIn.length > 0}>
        Still in the running:
        {' '}
        <CommaAnd items={stillIn.map(c => <span>
              <CandidateName id={c.id} />
              {` (${formatNumber(c.total)})`}
            </span>)} />
        {'. '}
      </IfActive>
      <IfActive active={dropped.length > 0}>
        Dropped out:
        {' '}
        <CommaAnd items={dropped.map(c => <span>
              <CandidateName id={c.id} />
              {` (${formatNumber(c.total)})`}
            </span>)} />
        .
      </IfActive>
    </div>;
};
export default CandidatesNote;