import { Text, Button, VStack } from '@chakra-ui/react';
import { useNavigate } from 'react-router-dom';
import propTypes from 'prop-types';

ErrorViewer.propTypes = {
  error: propTypes.object,
};

function ErrorViewer({ error }) {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate(-1);
  };

  return (
    <VStack justifyContent="center" alignItems="center" height="100%">
      <Text>There are something wrong</Text>
      <Text color="red">{error?.message}</Text>
      <Button colorScheme="primary" onClick={handleClick}>
        Go back
      </Button>
    </VStack>
  );
}

export default ErrorViewer;
