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

// extending interface from Label component
interface Props extends DefaultProps {
  fill: string
  stroke: string
}

const wording = {
  description: 'Account icon is used to represent the account section',
  title: 'Account Icon',
  vectorClassName: 'account',
}

class AccountIcon extends React.PureComponent<Props> {
  /**
   * passing the vector props here, since its not consider
   * by the Vector.tsx when we assigning it directly
   * Ex: <Vector width="44px" height="39px" ...>
   */
  static defaultProps = {
    width: '32px',
    height: '36px',
    viewBox: '0 0 32 36',
    fill: '#000000',
    stroke: '#000000',
  }

  render() {
    const { fill, stroke } = this.props
    return (
      <Vector {...this.props} {...wording}>
        <g fill="none">
          <path
            d="M15,15.7c2,0,3.7-1.7,3.7-3.8C18.7,9.8,17.1,8.1,15,8c0,0,0,0,0,0c-2.1,0-3.7,1.8-3.7,3.8c0,0,0,0,0,0
        C11.3,14,12.9,15.7,15,15.7C15,15.7,15,15.7,15,15.7z M15,17.7c-2.4,0-7.3,1.3-7.3,3.9v1.9h14.7v-1.9C22.3,18.9,17.4,17.7,15,17.7z"
            fill={fill}
          />
          <ellipse
            stroke={stroke}
            strokeWidth="2"
            cx="15"
            cy="15.7"
            rx="13.4"
            ry="14"
          />
        </g>
      </Vector>
    )
  }
}
export { AccountIcon }
export default AccountIcon