import ElectionLink from "../../ElectionLink/index.js";
import StateName from "../../StateName/index.js";
import { IconState } from "../../../icons/index.js";
import SectionTitle from '../SectionTitle';
import classes from './styles.module.scss';
const Battlegrounds = function Battlegrounds(props) {
  const {
    states
  } = props;
  if (states.length < 1) return null;
  return <div className={classes.container}>
      <SectionTitle>
        Battleground States
      </SectionTitle>

      <div className={classes.states}>
        {states.map(state => <ElectionLink key={state} to={`state:${state}:index`}>
            <div className={classes.link}>
              <IconState state={state} size="22" />
              {' '}
              <StateName stateFips={state} />
            </div>
          </ElectionLink>)}
      </div>
    </div>;
};
export default Battlegrounds;