import { useRouteError } from "react-router-dom";
import React, { useState } from "react";
import NavBar from "../components/NavBar";
import Error from "../components/Error";
import Footer from "../components/Footer";
import DropdownContainer from "../components/DropdownContainer";
import "../assets/stylesheets/app.scss";
import "../assets/stylesheets/error.scss";

export default function ErrorRoute() {
  const error = useRouteError();
  console.error(error);

  // create state for hamburger
  const [hamburger, setHamburger] = useState(false);
  // create function to toggle hamburger
  const hamburgerToggle = () => {
    setHamburger(!hamburger);
  };

  return (
    <div style={{backgroundColor: '#232323'}}>
      <div id="container">
        {hamburger ? (
          <DropdownContainer hamburgerToggle={hamburgerToggle} />
        ) : null}
        <NavBar hamburgerToggle={hamburgerToggle}></NavBar>
        <Error err={{ item: error }}></Error>
        <Footer></Footer>
      </div>
    </div>
  );
}