import sortBy from "../../../../utils/sorting/sortBy.js";
import StateName from "../../StateName/index.js";
import ElectionLink from "../../ElectionLink/index.js";
import classes from './styles.module.scss';
const StateBlocks = function StateBlocks(props) {
  const {
    partiallyClosed = [],
    fullyClosed = [],
    closingSoon = []
  } = props;
  const sortedFullyClosed = sortBy(fullyClosed);
  const sortedPartiallyClosed = sortBy(partiallyClosed);
  const sortedClosingSoon = sortBy(closingSoon);
  return <div className={classes.statesContainer}>
      {sortedFullyClosed.map(state => <ElectionLink to={`state:${state}:index`} key={state}>
          <span className={classes.fullyClosed}>
            <StateName format="abbr" stateFips={state} />
          </span>
        </ElectionLink>)}
      {sortedPartiallyClosed.map(state => <ElectionLink to={`state:${state}:index`} key={state}>
          <span className={classes.partiallyClosed}>
            <StateName format="abbr" stateFips={state} />
          </span>
        </ElectionLink>)}
      {sortedClosingSoon.map(state => <ElectionLink to={`state:${state}:index`} key={state}>
          <span className={classes.closingSoon}>
            <StateName format="abbr" stateFips={state} />
          </span>
        </ElectionLink>)}
    </div>;
};
export default StateBlocks;