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

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

const wording = {
  description:
    'A rounded rectangle shaped switch,with a circle toggle button inside which likely changes state when moved from left to right or viceversa',
  title: 'Switch icon',
}
class SwitchIcon extends React.PureComponent<Props> {
  static defaultProps = {
    width: '46px',
    height: '46px',
    viewBox: '0 0 46 46',
    stroke: '#000000',
    fill: '#000000',
  }

  render() {
    const { fill, stroke } = this.props
    return (
      <Vector {...this.props} {...wording}>
        <g fill="none">
          <use />
          <rect stroke={stroke} x=".5" y=".5" width="29" height="19" rx="9.5" />
          <rect fill={fill} x="12" y="2.5" width="15" height="15" rx="7.5" />
        </g>
      </Vector>
    )
  }
}

export { SwitchIcon }
export default SwitchIcon