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

const FrontCamera = () => {
  const navigate = useNavigate();
  const handlers = useSwipeable({
    onSwipedLeft: () => 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"
      {...handlers}
    >
      <OverviewVideoContainer
        title={"Front Camera"}
        side="CameraFront"
        settingsPage={true}
      />
      <CameraSettings title="Front Camera Settings" side="CameraFront" />
      <Toaster />
    </div>
  );
};

export default FrontCamera;