import { useNavigate } from "react-router";
import { useSwipeable } from "react-swipeable";
import OverviewVideoContainer from "../components/FrontCameraSettings/OverviewVideoContainer";
import CameraSettings from "../components/CameraSettings/CameraSettings";

const RearCamera = () => {
  const navigate = useNavigate();
  const handlers = useSwipeable({
    onSwipedRight: () => navigate("/"),
    trackMouse: true,
  });

  return (
    <div
      className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-4 px-2 sm:px-4 lg:px-0 w-full order-first"
      {...handlers}
    >
      <CameraSettings title="Rear Camera Settings" />
      <OverviewVideoContainer
        title={"Rear Camera"}
        side={"TargetDetectionRear"}
        settingsPage={true}
      />
    </div>
  );
};

export default RearCamera;