import getColor from "../../../../utils/colors/getColor.js";
import getElectionPaletteColor from "../../../../utils/colors/getElectionPaletteColor.js";
import classes from './styles.module.scss';
const DiamondPair = function DiamondPair(props) {
  const {
    palette
  } = props;
  const fullColor = getColor(getElectionPaletteColor(palette, 'main'));
  const hatch = `url(#${palette}-leading-small)`;
  return <div className={classes.container}>
      <svg width="24" height="16" viewBox="0 0 24 16">
        <polygon points={['0,8', '8,0', '16,8', '8,16'].join(' ')} fill={hatch} stroke="white" strokeWidth="1" />
        <polygon points={['8,8', '16,0', '24,8', '16,16'].join(' ')} fill={fullColor} stroke="white" strokeWidth="1" />
      </svg>
    </div>;
};
export default DiamondPair;