import React from 'react'
import { circleLoaderStyles } from './styled'
import { Vector } from 'atoms/Vector'

@circleLoaderStyles()
class CircleLoader extends React.PureComponent {
  static defaultProps = {
    width: '50px',
    height: 'auto',
    viewBox: '25 25 50 50',
  }
  render() {
    return (
      <div className="circle-loader-showbox">
        <div className="circle-loader">
          <Vector {...this.props} className="circular">
            <circle
              className="bg"
              cx="50"
              cy="50"
              r="20"
              fill="none"
              strokeWidth="4"
              strokeMiterlimit="10"
            />
            <circle
              className="path"
              cx="50"
              cy="50"
              r="20"
              fill="none"
              strokeWidth="2"
              strokeMiterlimit="10"
            />
          </Vector>
        </div>
      </div>
    )
  }
}

export { CircleLoader }
export default CircleLoader