import React from 'react';
import { Button, Container, Typography } from '@mui/material';
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
import { useStyles } from './notFoundStyles';
import { useNavigate } from 'react-router-dom';

function NotFound() {
  const classes = useStyles();
  const navigate = useNavigate();
  return (
    <Container className={classes.root}>
      <ErrorOutlineIcon className={classes.icon} />
      <Typography variant="h4" className={classes.message}>
        Page not found
      </Typography>
      <Button
        color="primary"
        variant="contained"
        className={classes.home}
        onClick={() => {
          navigate('/');
        }}
      >
        Home
      </Button>
    </Container>
  );
}

export default NotFound;
