import React from 'react'
import { DefaultProps } from 'icons/typings'
import Vector from 'atoms/Vector'
import { fromPropsToIdentifier } from 'atoms/Icons/deps'

// extending interface from Label component
interface Props extends DefaultProps {}

const wording = {
  description:
    'Payments Card Icon is used to represent the payement section card',
  title: 'PaymentsCardIcon',
  vectorClassName: 'paymentscard',
}
function fromBreedToComponent(breed) {
  switch (breed) {
    case 'withBg':
      return {
        svgPath: (
          <React.Fragment>
            <g fillRule="nonzero" fill="none">
              <rect fill="#0A7EC2" width="750" height="471" rx="40" />
              <path
                d="M208.904 273.65L201.487 291H135l52.47-110h125.322l12.65 24.293L337.259 181h168.959l14.442 15.101L536.17 181h78.462l-55.707 54.873L612.228 291h-75.931l-16.988-16.202L502.463 291H231.423l-8.155-17.35h-14.364zm14.41 1.163h-14.457 14.457zm160.601-78.099h-33l-24.83 52.643-26.714-52.643h-33v76.215l-34.1-76.215h-30.958l-36.456 78.572h22.314l7.386-17.915h42.429l8.486 17.915h41.014v-63.958l29.071 63.958h19.172l28.915-62.858v62.858h20.271v-78.572zm136.242 25.457l-23.57-25.457h-94.601v78.572h91.457l25.928-25.772 26.086 25.772h24.357l-37.243-39.757 38.343-38.815h-25.457l-25.3 25.457zm-49.814 37.4h-48.085v-17.285h48.085V226.57h-48.085v-14.143h48.085v-13.357l35.67 35.67-35.67 35.83v-11zm-254.1-49.972l13.83 31.9h-28.76l14.93-31.9z"
                fill="#FFF"
              />
            </g>
          </React.Fragment>
        ),
        viewBox: '0 0 750 471',
      }
    default:
      return {
        svgPath: (
          <g>
            <path d="M109.88,137.75l-11,25.8H0L78,0H264.35l18.81,36.12L300.72,0H551.93l21.47,22.45L596.47,0H713.13L630.3,81.59l79.25,82H596.66L571.4,139.46l-25,24.09h-403l-12.13-25.8m.07,1.73h0ZM370.09,23.36H321l-36.91,78.27L244.39,23.36H195.33V136.68L144.63,23.36h-46L44.39,140.19H77.57l11-26.64h63.08l12.62,26.64h61V45.09l43.23,95.09H297l43-93.46v93.46h30.14ZM572.66,61.21l-35-37.85H397V140.19h136l38.55-38.32,38.78,38.32h36.22L591.12,81.07l57-57.71H610.28L572.66,61.21ZM498.6,116.82H427.1V91.12H498.6V67.76H427.1v-21H498.6V26.87l53,53-53,53.27Zm-377.8-74.3L141.36,90H98.6Z" />
          </g>
        ),
        viewBox: '0 0 713.13 163.55',
      }
  }
}
class AmexCardIcon extends React.PureComponent<Props> {
  static defaultProps = {
    width: '80px',
    height: '80px',
    viewBox: '',
    fill: '#2c2c2c',
  }

  render() {
    const { breed, fill } = this.props
    const { svgPath, viewBox } = fromBreedToComponent(breed)
    const identifier = fromPropsToIdentifier(wording)
    return (
      <Vector
        {...this.props}
        {...wording}
        viewBox={viewBox}
        fill={fill}
        namespace={identifier}
      >
        {svgPath}
      </Vector>
    )
  }
}

export { AmexCardIcon }
export default AmexCardIcon