import { View } from '@tarojs/components'
import { memo, useMemo } from 'react'
import style from './index.module.scss'

interface LoadingProps {
  width?: number
  color?: string
}
const Loading = (props: LoadingProps) => {
  const { width = 60, color = '#6190e8' } = props
  const styleObj = useMemo(() => {
    let obj = {}
    if (width > 0) { obj = { width: `${width}rpx`, height: `${width}rpx` } }
    if (color) { obj = { ...obj, borderColor: `${color} transparent transparent` } }
    return obj
  }, [width, color])
  return (
    <View className={style.loading}
      style={styleObj}
    >
      <View style={styleObj} className={style.loading__ring}></View>
      <View style={styleObj} className={style.loading__ring}></View>
      <View style={styleObj} className={style.loading__ring}></View>
    </View>
  )
}
export default memo(Loading)