import "../App.css";
import { useNavigate } from "react-router-dom";
import { Button, Form } from "react-bootstrap";
import { useLocation } from "react-router-dom";

function EvaluationError() {
    const location = useLocation();
    const token = location.state.token;
    const username = location.state.username;
    const navigate = useNavigate();

    const handleSubmit = (event) => {
        event.preventDefault();
        navigate("/user", {
          state: { username: username, token: token },
        });
            
    }

  return (
    <div className="EvaluationError"
         style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            height: '100vh',
         }}
    >
      <div className="text-center p-4 rounded" style={{ background: "#e8e4e4", color: "black",}}> 
        <h1>Opps!</h1>
        <h4>There was an error and your course was not evaluated successfully.</h4>
        <h5>Click below to try again:</h5>
        <Form className="" onSubmit={handleSubmit}>        
          <Button className="mt-5 mb-5" variant="primary" type="submit" style={{ background: "#c5960c", color: "black" }}>
            Return
          </Button>
        </Form>
      </div>
    </div>
  );
}
export default EvaluationError;
