Mav-Mobile-UI/src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx

import clsx from "clsx";
import Card from "../UI/Card";
import CardHeader from "../UI/CardHeader";
import { faCamera } from "@fortawesome/free-regular-svg-icons";
import { useSwipeable } from "react-swipeable";
import { useNavigate } from "react-router";
import { useOverviewVideo } from "../../hooks/useOverviewVideo";
import SightingOverview from "../SightingOverview/SightingOverview";
import { useSightingFeedContext } from "../../context/SightingFeedContext";

type CardProps = React.HTMLAttributes<HTMLDivElement>;

const FrontCameraOverviewCard = ({ className }: CardProps) => {
  useOverviewVideo();
  const navigate = useNavigate();
  const handlers = useSwipeable({
    onSwipedRight: () => navigate("/front-camera-settings"),

    trackMouse: true,
  });
  const { mostRecent } = useSightingFeedContext();

  return (
    <Card
      className={clsx(
        "relative min-h-[40vh] md:min-h-[60vh] h-auto",
        className
      )}
    >
      <div className="flex flex-col space-y-3 h-full" {...handlers}>
        <CardHeader
          title="Front Overview"
          icon={faCamera}
          sighting={mostRecent}
        />
        <SightingOverview />
        {/* <SnapshotContainer side="TargetDetectionFront" /> */}
      </div>
    </Card>
  );
};

export default FrontCameraOverviewCard;