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

type SnapshotContainerProps = {
  side: string;
};

export const SnapshotContainer = ({ side }: SnapshotContainerProps) => {
  const { canvasRef } = useGetOverviewSnapshot(side);
  const navigate = useNavigate();

  return (
    <div className="relative w-full aspect-video">
      {side === "CameraFront" || side === "Rear" ? (
        <FontAwesomeIcon
          icon={faArrowLeft}
          className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer"
          onClick={() => navigate("/front-camera-settings")}
        />
      ) : (
        <FontAwesomeIcon
          icon={faArrowRight}
          className="absolute top-[50%] right-[2%] backdrop-blur-md"
        />
      )}

      <canvas ref={canvasRef} className="w-full h-full object-contain block" />
    </div>
  );
};