import ElectionLink from "../../ElectionLink/index.js";
import StateName from "../../StateName/index.js";
import { IconState } from "../../../icons/index.js";
import { prependContext } from "../../../../utils/tracking/index.js";
import SectionTitle from '../SectionTitle';
import classes from './styles.module.scss';
const Battlegrounds = function Battlegrounds(props) {
  const {
    states,
    tracking
  } = props;
  if (!states || states.length < 1) return null;
  const trackingOpts = {
    context: prependContext({
      prefix: tracking?.context,
      context: 'BattlegroundStates'
    })
  };
  return <div className={classes.container}>
      <SectionTitle>
        Battleground States
      </SectionTitle>

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