import ElectionIcon from "../../../ElectionIcon/index.js";
import classes from './styles.module.scss';
import typography from '../../typography.module.scss';
import Candidate from '../../Candidate';
import SpotsRemaining from '../../SpotsRemaining';
const Runoff = function Runoff(props) {
  const {
    contestId,
    candidatesToShow
  } = props;
  return <span className={classes.container}>
      <span className={classes.block}>
        <ElectionIcon type="OutcomeRunoff" size={3} />
      </span>

      <span className={classes.text}>
        {candidatesToShow.map((cand, idx) => <Candidate key={cand} hasComma={candidatesToShow.length > 1 && idx < candidatesToShow.length - 2} hasAnd={candidatesToShow.length > 1 && idx === candidatesToShow.length - 2} candidateId={cand} contestId={contestId} />)}
        <span className={typography.context}>
          {`advance${candidatesToShow.length > 1 ? '' : 's'}`}
          {' '}
          to runoff
          <SpotsRemaining contestId={contestId} callType="runoff" />
        </span>
      </span>
    </span>;
};
export default Runoff;