import Svg, { ClipPath, G, Path } from 'react-native-svg';
import { useColorScheme } from 'react-native';

export const Visa = (props: any) => {
  const isLightTheme = useColorScheme() === 'light';

  return isLightTheme ? (
    <Svg
      xmlns="http://www.w3.org/2000/svg"
      xmlSpace="preserve"
      style={{
        fillRule: 'evenodd',
        clipRule: 'evenodd',
        strokeLinecap: 'round',
        strokeLinejoin: 'round',
        strokeMiterlimit: 1.5,
      }}
      viewBox="0 0 96 64"
      {...props}
    >
      <Path
        d="M95 6.894A5.897 5.897 0 0 0 89.106 1H6.894A5.897 5.897 0 0 0 1 6.894v50.212A5.897 5.897 0 0 0 6.894 63h82.212A5.897 5.897 0 0 0 95 57.106V6.894Z"
        // @ts-ignore
        style={{
          fill: '#fff',
          stroke: '#7e7e7e',
          strokeWidth: '.5px',
        }}
      />
      <ClipPath id="a">
        <Path d="M7.179 18.832h81.642v26.336H7.179z" />
      </ClipPath>
      <G clipPath="url(#a)">
        <Path
          d="m47.418 19.387-5.431 25.384H35.42l5.432-25.384h6.566Zm27.627 16.39 3.457-9.532 1.989 9.532h-5.446Zm7.326 8.994h6.074l-5.3-25.384h-5.607a2.99 2.99 0 0 0-2.795 1.863l-9.852 23.521h6.895l1.37-3.79h8.424l.791 3.79Zm-17.137-8.287c.028-6.701-9.267-7.069-9.201-10.062.019-.912.887-1.879 2.784-2.127.943-.123 3.534-.218 6.476 1.136l1.152-5.383c-1.58-.574-3.614-1.125-6.143-1.125-6.49 0-11.059 3.451-11.097 8.391-.041 3.655 3.261 5.693 5.75 6.908 2.557 1.245 3.417 2.041 3.406 3.154-.017 1.704-2.041 2.455-3.929 2.485-3.302.052-5.218-.892-6.745-1.603l-1.19 5.562c1.534.705 4.365 1.317 7.303 1.348 6.898 0 11.411-3.408 11.434-8.684Zm-27.2-17.097L27.395 44.771h-6.942l-5.235-20.258c-.318-1.248-.595-1.705-1.562-2.23-1.576-.857-4.183-1.66-6.477-2.158l.157-.738h11.173c1.423 0 2.705.948 3.028 2.588l2.765 14.69 6.833-17.278h6.899Z"
          // @ts-ignore
          style={{
            fill: '#0d357f',
            fillRule: 'nonzero',
          }}
        />
      </G>
    </Svg>
  ) : (
    <Svg
      xmlns="http://www.w3.org/2000/svg"
      xmlSpace="preserve"
      style={{
        fillRule: 'evenodd',
        clipRule: 'evenodd',
        strokeLinejoin: 'round',
        strokeMiterlimit: 2,
      }}
      viewBox="0 0 96 64"
      {...props}
    >
      <Path
        d="M235.31 16.084c0-7.824-6.574-14.176-14.672-14.176H15.992c-8.097 0-14.671 6.352-14.671 14.176v120.764c0 7.824 6.574 14.176 14.671 14.176h204.646c8.098 0 14.672-6.352 14.672-14.176V16.084Z"
        // @ts-ignore
        style={{
          fill: '#343434',
        }}
        transform="matrix(.40173 0 0 .41578 .47 .207)"
      />
      <G transform="matrix(.0903 0 0 .0903 7.179 18.832)">
        <ClipPath id="a">
          <Path d="M0 0h904.167v291.667H0z" />
        </ClipPath>
        <G clipPath="url(#a)">
          <Path
            d="M106.952 1.476 92.517 68.945H75.064L89.5 1.476h17.452Zm73.431 43.564 9.189-25.336 5.288 25.336h-14.477Zm19.473 23.905H216L201.913 1.476H187.01c-3.347 0-6.173 1.948-7.429 4.95l-26.185 62.519h18.326l3.64-10.075h22.392l2.102 10.075Zm-45.55-22.028c.074-17.809-24.629-18.789-24.456-26.744.051-2.422 2.358-4.994 7.401-5.653 2.505-.327 9.392-.578 17.212 3.02l3.062-14.307C153.326 1.708 147.92.241 141.199.241c-17.25 0-29.394 9.173-29.496 22.305-.109 9.713 8.667 15.13 15.282 18.361 6.798 3.307 9.083 5.425 9.054 8.383-.045 4.529-5.425 6.524-10.443 6.604-8.777.138-13.869-2.37-17.929-4.261l-3.163 14.783c4.078 1.874 11.604 3.5 19.413 3.584 18.333 0 30.329-9.059 30.389-23.083ZM82.011 1.476 53.734 68.945H35.282L21.367 15.099c-.845-3.317-1.58-4.53-4.15-5.927C13.026 6.896 6.097 4.76 0 3.436l.417-1.96h29.697c3.784 0 7.19 2.519 8.049 6.878l7.35 39.045L63.675 1.476h18.336Z"
            // @ts-ignore
            style={{
              fill: '#f9f9f9',
              fillRule: 'nonzero',
            }}
            transform="scale(4.16667)"
          />
        </G>
      </G>
    </Svg>
  );
};
