import sortBy from "../../../../utils/sorting/sortBy.js";
import StateName from "../../StateName/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 => <span className={classes.fullyClosed} key={state}>
          <StateName format="abbr" stateFips={state} />
        </span>)}
      {sortedPartiallyClosed.map(state => <span className={classes.partiallyClosed} key={state}>
          <StateName format="abbr" stateFips={state} />
        </span>)}
      {sortedClosingSoon.map(state => <span className={classes.closingSoon} key={state}>
          <StateName format="abbr" stateFips={state} />
        </span>)}
    </div>;
};
export default StateBlocks;