import ElectionIcon from "../../ElectionIcon/index.js";
import { IfActive } from "../../../application/index.js";
import { PartyName } from "../../index.js";
import getElectionPaletteColor from "../../../../utils/colors/getElectionPaletteColor.js";
import getColor from "../../../../utils/colors/getColor.js";
import classnames from 'classnames';
import { pluralize } from 'journalize';
import { useContainerBreakpoint } from "../../../../hooks/breakpoint/index.js";
import classes from './styles.module.scss';
const icons = {
  dem: 'OutcomeFlipToDem',
  gop: 'OutcomeFlipToGop'
};
const FlipCard = function FlipCard(props) {
  const {
    flips: allFlips,
    party,
    disableFlipCount
  } = props;
  const isMd = useContainerBreakpoint('md');
  if (!allFlips) {
    return null;
  }
  const flips = allFlips[party];
  if (!flips || !(flips > 0)) {
    return null;
  }
  const bg = getElectionPaletteColor(party, 'bgInverse');
  const iconSize = isMd ? '4' : '3';
  const iconType = icons[party];
  return <div className={classnames(classes.container, classes[party])} style={{
    background: getColor(bg)
  }}>
      <ElectionIcon type={iconType} size={iconSize} />

      <IfActive active={!disableFlipCount}>
        {flips}
        {' '}
      </IfActive>

      <PartyName id={party} />
      {' '}
      {`flip${pluralize(flips)}`}
    </div>;
};
export default FlipCard;