import clsx from "clsx";
import { SnapshotContainer } from "../CameraOverview/SnapshotContainer";
import { faCamera } from "@fortawesome/free-regular-svg-icons";
import Card from "../UI/Card";
import CardHeader from "../UI/CardHeader";

const OverviewVideoContainer = ({
  title,
  side,
}: {
  title: string;
  side: string;
}) => {
  return (
    <Card className={clsx("min-h-[40vh] md:min-h-[60vh] h-auto")}>
      <div className="relative flex flex-col space-y-3 h-full">
        <CardHeader title={title} icon={faCamera} />
        <SnapshotContainer side={side} />
      </div>
    </Card>
  );
};

export default OverviewVideoContainer;
