import React from 'react'
import { View } from '@tarojs/components'
import './index.less'

const cubeLen = 9

export default props => {

  const color = props.color || '#9e1068'
  const tipText = props.tips || 'LOADING'
  const cubeStyle = { backgroundColor: color }
  const tipStyle = { color }

  return (
    <>
      {
        props.loading ? (
          <View className="cubes-box">
            <View className="cubes">
              {
                new Array(cubeLen).fill(0).map((_, inx) => (
                  <View key={inx} class={`sk-cube sk-cube${inx + 1}`} style={cubeStyle}></View>
                ))
              }
            </View>
            <View className="cubes-tip" style={tipStyle}>{tipText}</View>
          </View>
        ) : props.children
      }
    </>
  )
}
