import { Box } from '@chakra-ui/react'
import React from 'react'
import Lottie from 'react-lottie'
import { LoadingAnimation } from '../../../constants'

interface ILoadingProps {}

const Loading: React.FunctionComponent<ILoadingProps> = (props) => {
  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData: LoadingAnimation,
    rendererSettings: {
      preserveAspectRatio: 'xMidYMid slice',
    },
  }

  return (
    <Box mx="auto" maxW="350px">
      <Lottie options={defaultOptions} isClickToPauseDisabled={true} isStopped={false} isPaused={false} speed={1.3} />
    </Box>
  )
}

export default Loading