import React from 'react'
import { LoaderText, LoaderElement, CubeFolding, CubeLoaderWrapper } from './styled'

class CubeLoader extends React.Component {
  static defaultProps = {
    className: ''
  }
  render() {
    const { className } = this.props
    const loaderElementStack = []
    for (let elementSize = 4; elementSize > 0; elementSize--) {
      loaderElementStack.push(<LoaderElement />)
    }

    return (
      <CubeLoaderWrapper className={className}>
        <CubeFolding>
          {loaderElementStack}
        </CubeFolding>
        <LoaderText data-name="Loading">
          Loading
        </LoaderText>
      </CubeLoaderWrapper>
    )
  }
}

export { CubeLoader }
export default CubeLoader