import getColor from '../../../../../utils/colors/getColor.js';
import cx from '../../../../../utils/css/cx.js';
import getCalendarNote from '../../../../../utils/election/getCalendarNote/index.js';
import ElectionLink from '../../../ElectionLink/index.js';
import PartyTags from '../../../PartyTags/index.js';
import Note from './Note';
import classes from './styles.module.scss';
const cls = cx.merge(classes);
export default function Election(props) {
  const {
    state,
    parties,
    isEven,
    isRaised,
    stateFips,
  } = props;
  const note = getCalendarNote(props);
  return (
    <div
      className={cls('shadow-100', 'p-3', 'contest', {
        'is-even': isEven,
        'is-raised': isRaised,
      })}
    >
      <div className={cls('state')}>
        <PartyTags parties={parties} />
        <ElectionLink className={cls('title')} to={`state:${stateFips}:index`}>
          {state}
        </ElectionLink>
        <svg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9' fill='none'>
          <path
            d={'M3.81583 7.31306C3.36477 7.72879 2.59333 7.44358 ' + '2.59323 6.86104L2.5924 2.17178C2.5923 '
              + '1.58925 3.36363 1.29099 3.81484 ' + '1.69908L6.38316 4.02199C6.66287 '
              + '4.27498 6.66295 4.68899 6.38332 4.9467L3.81583 7.31306Z'}
            fill={getColor('warmgray-100')}
          />
        </svg>
      </div>
      <Note content={note} />
    </div>
  );
}
