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 { useTranslation } from 'react-i18next';

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

const NotFound = () => {
  const { t } = useTranslation('~', {
    keyPrefix: 'dry-wash',
  });

  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'>{t(`notFound.title`)}</Heading>
        <Text fontSize='lg'>{t(`notFound.description`)}</Text>
        <Button
          as={Link}
          to='/dry-wash'
          colorScheme='teal'
          size='lg'
          variant='outline'
        >
          {t(`notFound.button.back`)}
        </Button>
      </VStack>
    </Center>
  );
};

export default NotFound;