// @flow
import * as React from 'react';

type Props = {
  backgroundColor: ?string,
  color: ?string
};

const MixMatch = ({ backgroundColor, color }: Props) => (
  <svg width="20px" height="20px" viewBox="0 0 20 20">
    <g id="icone-Croiser" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
      <g id="Croiser">
        <circle id="Oval-6" fill={backgroundColor} cx="10" cy="10" r="10" />
        <g
          id="shuffle"
          transform="translate(5.000000, 5.000000)"
          fill={color}
          fillRule="nonzero"
          stroke={color}
          strokeWidth="0.5"
        >
          <path
            d="M3.74145786,7.5142369 C3.6047836,7.41173121 3.41343964,7.43906606 3.31093394,7.57574032 C2.79840547,8.25455581 2.01708428,8.64407745 1.16742597,8.64407745 L0.320045558,8.64407745 C0.149202733,8.64407745 0.0125284738,8.78075171 0.0125284738,8.95159453 C0.0125284738,9.12243736 0.149202733,9.25911162 0.320045558,9.25911162 L1.16970387,9.25911162 C1.69589977,9.25911162 2.19931663,9.13838269 2.66400911,8.90148064 C3.10820046,8.67596811 3.5022779,8.34567198 3.80296128,7.94476082 C3.90318907,7.81036446 3.87813212,7.6167426 3.74145786,7.5142369 Z" // eslint-disable-line
            id="Shape"
          />
          <path
            d="M4.60933941,3.19077449 C4.66628702,3.23405467 4.73234624,3.25455581 4.79840547,3.25455581 C4.88952164,3.25455581 4.98063781,3.21355353 5.04214123,3.13610478 C5.5546697,2.47551253 6.32687927,2.09738041 7.16059226,2.09738041 L8.94874715,2.09738041 L7.99430524,3.05182232 C7.87357631,3.17255125 7.87357631,3.36617312 7.99430524,3.48690205 C8.05353075,3.54612756 8.1332574,3.57801822 8.21070615,3.57801822 C8.2881549,3.57801822 8.36788155,3.54840547 8.42710706,3.48690205 L9.90774487,2.00626424 C10.0284738,1.88553531 10.0284738,1.69191344 9.90774487,1.57118451 L8.42710706,0.090546697 C8.30637813,-0.0301822323 8.11275626,-0.0301822323 7.99202733,0.090546697 C7.87129841,0.211275626 7.87129841,0.404897494 7.99202733,0.525626424 L8.94646925,1.48006834 L7.15831435,1.48006834 C6.1332574,1.48006834 5.1833713,1.94476082 4.5523918,2.75797267 C4.45216401,2.89464692 4.47494305,3.08599089 4.60933941,3.19077449 Z" // eslint-disable-line
            id="Shape"
          />
          <path
            d="M8.42938497,7.25455581 C8.30865604,7.13382688 8.11503417,7.13382688 7.99430524,7.25455581 C7.87357631,7.37528474 7.87357631,7.56890661 7.99430524,7.68963554 L8.94874715,8.64407745 L7.16059226,8.64407745 C5.68223235,8.64407745 4.47949886,7.44134396 4.47949886,5.96298405 L4.47949886,4.7784738 C4.47949886,2.96070615 3.00113895,1.48234624 1.1833713,1.48234624 L0.333712984,1.48234624 C0.162870159,1.48234624 0.0261958998,1.6190205 0.0261958998,1.78986333 C0.0261958998,1.96070615 0.162870159,2.09738041 0.333712984,2.09738041 L1.1833713,2.09738041 C2.66173121,2.09738041 3.86446469,3.3001139 3.86446469,4.7784738 L3.86446469,5.96298405 C3.86446469,7.78075171 5.3428246,9.25911162 7.16059226,9.25911162 L8.94874715,9.25911162 L7.99430524,10.2135535 C7.87357631,10.3342825 7.87357631,10.5279043 7.99430524,10.6486333 C8.05353075,10.7078588 8.1332574,10.7397494 8.21070615,10.7397494 C8.2881549,10.7397494 8.36788155,10.7101367 8.42710706,10.6486333 L9.90774487,9.16799544 C10.0284738,9.04726651 10.0284738,8.85364465 9.90774487,8.73291572 L8.42938497,7.25455581 Z" // eslint-disable-line
            id="Shape"
          />
        </g>
      </g>
    </g>
  </svg>
);

MixMatch.defaultProps = {
  color: '#5404d7',
  backgroundColor: '#f2f1fa'
};

export default MixMatch;