import cx from "../../../../utils/css/cx.js";
import { ElectionIcon, ElectionLink, PartyName } from "../../index.js";
import { IfActive } from "../../../application/index.js";
import getElectionPaletteCssVariables from "../../../../utils/css/getElectionPaletteCssVariables.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const Call = function Call(props) {
  const {
    call
  } = props;
  const {
    link,
    isFlip,
    party,
    text,
    feedType
  } = call;
  const important = feedType === 'bop';
  const styleVars = getElectionPaletteCssVariables(party);
  return <ElectionLink to={important ? undefined : link}>
      <div className={cls('call', party, {
      important
    })} style={styleVars}>
        <div className={cls('leaderboard')}>

          <div className={cls('leaderboard-call-type')}>
            <IfActive active={isFlip && party === 'gop'}>
              <ElectionIcon type="OutcomeFlipToGop" size="3" />
            </IfActive>

            <IfActive active={isFlip && party === 'dem'}>
              <ElectionIcon type="OutcomeFlipToDem" size="3" />
            </IfActive>
          </div>

          <div className={cls('leaderboard-party')}>
            <PartyName id={party} format="letter" />
          </div>
          <div className={cls('leaderboard-icon')}>
            <ElectionIcon type="OutcomeWin" />
          </div>
        </div>

        <div className={cls('copy')}>

          <span className={cls('text')}>
            {text}
          </span>
          <ElectionIcon type="LinkCaret" size="2" />

        </div>
      </div>
    </ElectionLink>;
};
export default Call;