import { Fragment } from 'react';
import StateName from "../../StateName/index.js";
import { useGetMapFills } from "../../../../hooks/election/index.js";
import { useContainerBreakpointIsAtMost } from "../../../../hooks/breakpoint/index.js";
import cx from "../../../../utils/css/cx.js";
import EvShapes from './EvShapes';
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const splitStates = [{
  stateFips: '23',
  codes: ['2301', '2302']
}, {
  stateFips: '31',
  codes: ['3102', '3101', '3103']
}];
const SplitEvs = function SplitEvs(props) {
  const {
    colors,
    fipsToPalette,
    tooltip,
    isZoomed,
    zoomable,
    layout
  } = props;
  const getMapFills = useGetMapFills(colors);
  const atMostMd = useContainerBreakpointIsAtMost('md');
  const size = layout === 'embed' && atMostMd ? 10 : 16;
  return <div className={cls('splitEvs', layout, {
    isZoomed,
    zoomable
  })}>
      {splitStates.map(state => <Fragment key={state.stateFips}>
          <div className={classes.label}>
            <StateName stateFips={state.stateFips} format="abbr" />
          </div>

          <EvShapes tooltip={tooltip} fipsToPalette={fipsToPalette} getMapFills={getMapFills} codes={state.codes} shapeWidth={size} layout={layout} />
        </Fragment>)}
    </div>;
};
export default SplitEvs;