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

interface IFailedAnimationComponentProps {}

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

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

export default FailedAnimationComponent