import React from 'react';
import { Text, Button, Center, VStack, Heading } from '@chakra-ui/react';
import { Link } from 'react-router-dom';
import { Player } from '@lottiefiles/react-lottie-player';
import i18next from 'i18next';

import animate from '../../assets/animation/notFound.json';

const NotFound = () => {
  return (
    <Center minH='100vh'>
      <VStack spacing={4} textAlign='center'>
        <Player
          autoplay
          loop
          src={animate}
          style={{
            height: '100%',
            width: '100%',
            maxHeight: '450px',
            maxWidth: '450px',
          }}
        />
        <Heading fontSize='xl'>
          {i18next.t(`dry-wash.arm.notFound.title`)}
        </Heading>
        <Text fontSize='lg'>
          {i18next.t(`dry-wash.arm.notFound.description`)}
        </Text>
        <Button
          as={Link}
          to='/dry-wash'
          colorScheme='teal'
          size='lg'
          variant='outline'
        >
          {i18next.t(`dry-wash.arm.notFound.button.back`)}
        </Button>
      </VStack>
    </Center>
  );
};

export default NotFound;