import React from 'react'
import { CircleBackground, CirclePath, StyledVector, CircleLoaderWrapper } from './styled'

class CircleLoader extends React.PureComponent {
  static defaultProps = {
    className: '',
    width: '50px',
    height: 'auto',
    viewBox: '25 25 50 50',
  }
  render() {
    const { className } = this.props
    return (
      <CircleLoaderWrapper className={className}>
        <StyledVector {...this.props}>
          <CircleBackground
            cx="50"
            cy="50"
            r="20"
            fill="none"
            strokeWidth="4"
            strokeMiterlimit="10"
          />
          <CirclePath
            cx="50"
            cy="50"
            r="20"
            fill="none"
            strokeWidth="2"
            strokeMiterlimit="10"
          />
        </StyledVector>
      </CircleLoaderWrapper>
    )
  }
}

export { CircleLoader }
export default CircleLoader