import { Box } from "@mui/material";
import { useAtom } from "jotai";
import { routeAtom } from "../../lib/jotai";
import { useEffect, useState } from "react";

export const RouteDisplay = () => {
  // atoms
  const [route, setRoute] = useAtom(routeAtom);

  // states
  const [routeName, setRouteName] = useState("Home");

  // update the route name based on the route value
  useEffect(() => {
    switch (route) {
      case "home":
        setRouteName("Home");
        break;
      case "sql_injection":
        setRouteName("SQL Injection");
        break;
      case "xss":
        setRouteName("Cross-site Scripting");
        break;
      case "cmd_injection":
        setRouteName("Command Injection");
        break;
      case "testing":
        setRouteName("Testing");
        break;
      default:
        setRouteName("Home");
    }
  }, [route]);

  return <Box>{routeName}</Box>;
};
