import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useNavigate } from "react-router";

type NavigationArrowProps = {
  side: string;
};

const NavigationArrow = ({ side }: NavigationArrowProps) => {
  const navigate = useNavigate();

  const navigationDest = (side: string) => {
    if (side === "CameraFront") {
      navigate("/front-camera-settings");
    } else if (side === "Rear") {
      navigate("/");
    } else if (side === "TargetDetectionRear") {
      navigate("/Rear-Camera-settings");
    } else {
      navigate("/");
    }
  };
  return (
    <>
      {side === "CameraFront" || side === "Rear" ? (
        <FontAwesomeIcon
          icon={faArrowLeft}
          className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce"
          onClick={() => navigationDest(side)}
        />
      ) : (
        <FontAwesomeIcon
          icon={faArrowRight}
          className="absolute top-[50%] right-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce"
          onClick={() => navigationDest(side)}
        />
      )}
    </>
  );
};

export default NavigationArrow;