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

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

const wording = {
  title: 'Help Icon',
  description: 'A question mark placed inside a circle',
}

class HelpIcon extends React.PureComponent<Props> {
  static defaultProps = {
    width: '22px',
    height: '22px',
    viewBox: '0 0 22 22',
    fill: '#000000',
  }

  render() {
    const { fill } = this.props
    return (
      <Vector {...this.props} {...wording}>
        <g stroke="none" fill="none" fillRule="evenodd">
          <g fillRule="nonzero">
            <path
              d="M20.515827,10.715769 C20.515827,16.2386165 16.0386745,20.715769 10.515827,20.715769 C4.9929795,20.715769 0.515827,16.2386165 0.515827,10.715769 C0.515827,5.1929215 4.9929795,0.715769 10.515827,0.715769 C16.0386745,0.715769 20.515827,5.1929215 20.515827,10.715769 Z"
              stroke={fill}
              fill="#FFFFFF"
            />
            <g transform="translate(7.015827, 4.715769)" fill={fill}>
              <path d="M1.88819761,2.79159142 C1.71061318,3.14660323 1.60970635,3.6585776 1.5854771,4.32747666 L0.269734698,4.32747666 C0.269734698,3.21612875 0.570424003,2.32282435 1.17180261,1.64654105 C1.77318122,0.970257744 2.59853528,0.632097156 3.64790105,0.632097156 C4.61855804,0.632097156 5.39548987,0.921786792 5.97971214,1.50010577 C6.56393442,2.07842476 6.85551962,2.8179475 6.85551962,3.71859827 C6.85551962,4.26427508 6.74855547,4.70672394 6.53364786,5.04590696 C6.31874024,5.38508999 5.88689381,5.88441647 5.23709298,6.54278824 C4.76386098,7.02106015 4.45711436,7.42662565 4.31688941,7.7584623 C4.17662819,8.09029894 4.10600791,8.5801206 4.10600791,9.22800288 L2.79026551,9.22800288 C2.79026551,8.49268356 2.87401601,7.89963392 3.041517,7.44983869 C3.20901799,7.00000559 3.57630145,6.48382788 4.14235178,5.90236586 L4.73361069,5.29242716 C4.91119511,5.11755308 5.05345126,4.93533262 5.16244659,4.7446676 C5.35921855,4.41074822 5.45805791,4.0630828 5.45805791,3.70284521 C5.45805791,3.19825508 5.31377057,2.76106987 5.02621149,2.39132743 C4.7386524,2.02158499 4.26139428,1.83618362 3.59646831,1.83618362 C2.77310917,1.83402515 2.20401204,2.1532139 1.88819761,2.79159142 Z" />
              <polygon points="2.76463826 10.3859125 4.24454752 10.3859125 4.24454752 11.9982422 2.76463826 11.9982422" />
            </g>
          </g>
        </g>
      </Vector>
    )
  }
}

export { HelpIcon }
export default HelpIcon