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

type NavigationArrowProps = {
  side: string | undefined;
  settingsPage?: boolean;
};

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

  const navigationDest = (side: string | undefined) => {
    if (settingsPage) {
      navigate("/");
      return;
    }

    if (side === "Front") {
      navigate("/a-camera-settings");
    } else if (side === "Rear") {
      navigate("/b-Camera-settings");
    }
  };

  if (settingsPage) {
    return (
      <>
        {side === "CameraA" ? (
          <FontAwesomeIcon
            size="2xl"
            icon={faArrowRight}
            className="absolute top-[50%] right-[2%] backdrop-blur-lg hover:cursor-pointer animate-bounce z-30 rounded-md arrow-outline"
            onClick={() => navigationDest("a")}
          />
        ) : (
          <FontAwesomeIcon
            icon={faArrowLeft}
            size="2xl"
            className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-30 rounded-md arrow-outline"
            onClick={() => navigationDest("b")}
          />
        )}
      </>
    );
  }
  return (
    <>
      <FontAwesomeIcon
        icon={faArrowLeft}
        size="2xl"
        className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-100 arrow-outline rounded-md"
        onClick={() => navigationDest("Front")}
      />

      <FontAwesomeIcon
        icon={faArrowRight}
        size="2xl"
        className="absolute top-[50%] right-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-100 arrow-outline rounded-md"
        onClick={() => navigationDest("Rear")}
      />
    </>
  );
};

export default NavigationArrow;