import React from 'react';

type Props = {
  className?: string,
  height?: string,
  viewBox?: string,
  device?: string,
}

const PlusLogo = ({
  className, height, viewBox, device,
}: Props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="85"
    height={height}
    viewBox={viewBox}
    className={className}
  >
    <title>Plus logo</title>
    <desc>This is the Apolitical plus logo.</desc>
    <defs>
      <linearGradient id={`plus-logo-gradient-${device}`} x1="100%" x2="0%" y1="54.082%" y2="45.918%">
        <stop offset="0%" stopColor="#ED1F7A" />
        <stop offset="100%" stopColor="#F44D44" />
      </linearGradient>
    </defs>
    <g fill="none" fillRule="evenodd">
      <path fill="#FFF" d="M3.957 0h78.935c.7 0 1.266.567 1.266 1.266 0 .05-.003.099-.009.148l-2.532 21.468C81.54 23.52 81 24 80.359 24H1.424c-.7 0-1.266-.567-1.266-1.266 0-.05.003-.099.009-.148L2.7 1.118C2.775.48 3.315 0 3.957 0z" />
      <path fill={`url(#plus-logo-gradient-${device})`} d="M3.957 0h78.935c.7 0 1.266.567 1.266 1.266 0 .05-.003.099-.009.148l-2.532 21.468C81.54 23.52 81 24 80.359 24H1.424c-.7 0-1.266-.567-1.266-1.266 0-.05.003-.099.009-.148L2.7 1.118C2.775.48 3.315 0 3.957 0zm7.641 12.25c.555 0 1.046-.085 1.472-.258.426-.172.783-.41 1.071-.714.288-.303.504-.665.65-1.083.145-.419.218-.878.218-1.378 0-.749-.222-1.345-.665-1.787-.443-.442-1.118-.663-2.025-.663h-2.04l-.72 5.884h2.04zm.924-7.514c.785 0 1.465.095 2.04.284.575.189 1.05.454 1.426.795.376.34.655.75.838 1.225.182.476.274 1.004.274 1.585 0 .77-.124 1.477-.37 2.122-.248.645-.613 1.2-1.097 1.666-.484.466-1.08.83-1.791 1.093-.711.264-1.526.395-2.447.395h-2.04l-.66 5.378h-2.07L8.4 4.736h4.121zm16.585 12.791l-.213 1.752H21.17l1.786-14.543h2.091l-1.583 12.791h5.643zm9.745.101c.528 0 1.011-.1 1.451-.298.44-.2.826-.48 1.157-.841.332-.361.604-.79.817-1.286.214-.496.357-1.045.432-1.646l1.076-8.82h2.09l-1.085 8.82c-.109.844-.332 1.626-.67 2.345-.339.719-.775 1.341-1.31 1.868-.534.527-1.155.939-1.862 1.236-.707.297-1.48.445-2.32.445-.839 0-1.576-.148-2.212-.445-.636-.297-1.156-.71-1.558-1.236-.403-.527-.686-1.15-.848-1.868-.162-.72-.193-1.5-.091-2.345l1.076-8.82h2.08l-1.086 8.82c-.074.594-.066 1.141.026 1.64.091.5.259.93.502 1.287.244.358.562.638.954.84.393.203.853.304 1.38.304zM55.924 4.584c.758 0 1.443.147 2.056.44.612.294 1.111.688 1.497 1.18l-.61.882c-.073.108-.15.187-.227.238-.078.05-.171.076-.28.076-.095 0-.197-.04-.305-.12l-.065-.053c-.132-.114-.298-.24-.497-.374-.2-.135-.44-.26-.721-.375-.28-.115-.628-.172-1.04-.172-.42 0-.792.064-1.117.192-.325.129-.599.302-.822.522-.223.22-.393.477-.508.775-.115.297-.172.614-.172.952 0 .337.081.622.243.855.163.233.376.432.64.598.264.165.563.312.898.44l.681.264.35.136c.351.139.695.294 1.03.466.335.172.634.383.898.633s.477.552.64.907c.162.354.243.785.243 1.29 0 .696-.12 1.353-.36 1.97-.24.618-.584 1.16-1.03 1.626-.447.466-.989.834-1.625 1.104-.636.27-1.35.405-2.141.405-.433 0-.848-.045-1.244-.137-.396-.09-.766-.219-1.111-.384-.345-.166-.662-.365-.95-.598-.287-.233-.542-.494-.766-.785l.731-.992c.068-.075.146-.139.234-.193.088-.054.182-.08.284-.08.088 0 .18.035.279.106.074.053.153.116.238.19l.087.078c.118.108.252.223.4.344.15.122.322.237.518.345.197.108.423.197.68.268.258.07.552.106.884.106.446 0 .847-.069 1.202-.207.356-.139.658-.333.909-.583.25-.25.441-.55.573-.9.132-.352.198-.74.198-1.166 0-.364-.08-.665-.238-.9-.16-.237-.37-.438-.635-.604-.264-.165-.563-.308-.898-.43l-1.025-.375c-.349-.128-.69-.273-1.025-.435-.335-.162-.635-.37-.899-.623s-.475-.564-.634-.932c-.159-.368-.239-.822-.239-1.362 0-.6.11-1.18.33-1.737.22-.557.537-1.048.95-1.473.412-.426.915-.765 1.507-1.018.592-.253 1.26-.38 2.004-.38zm16.343-.13c.484.062.836.477.83.952l-.008.111-.677 5.217h5.13c.396 0 .722.362.77.83l.006.12c0 .524-.347.949-.775.949l-5.377-.001-.707 5.462c-.067.52-.544.887-1.066.82-.484-.063-.835-.478-.83-.953l.009-.111.675-5.218-5.11.001c-.395 0-.721-.362-.77-.83l-.005-.12c0-.524.347-.949.775-.949h5.356l.708-5.46c.058-.446.417-.78.847-.823l.108-.005z" />
    </g>
  </svg>

);

PlusLogo.defaultProps = {
  className: '',
  height: '24px',
  viewBox: '0 0 85 24',
  device: '1',
};

export default PlusLogo;
