import clsx from "clsx";
import Card from "../UI/Card";
import { useSwipeable } from "react-swipeable";
import { useNavigate } from "react-router";

import SightingOverview from "../SightingOverview/SightingOverview";

const FrontCameraOverviewCard = () => {
  const navigate = useNavigate();
  const handlers = useSwipeable({
    onSwipedRight: () => navigate("/a-camera-settings"),
    onSwipedLeft: () => navigate("/b-camera-settings"),
    trackMouse: true,
  });

  return (
    <Card className={clsx("relative min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[70%] overflow-y-hidden")}>
      <div className="w-full" {...handlers}>
        <SightingOverview />
      </div>
    </Card>
  );
};

export default FrontCameraOverviewCard;