Mav-Mobile-UI/src/components/CameraOverview/SnapshotContainer.tsx

import { useGetOverviewSnapshot } from "../../hooks/useGetOverviewSnapshot";
import NavigationArrow from "../UI/NavigationArrow";

type SnapshotContainerProps = {
  side: string;
  settingsPage?: boolean;
};

export const SnapshotContainer = ({
  side,
  settingsPage,
}: SnapshotContainerProps) => {
  const { canvasRef, isError, isPending } = useGetOverviewSnapshot(side);

  if (isError) return <>An error occurred</>;
  if (isPending) return <>Loading...</>;

  return (
    <div className="flex flex-col md:flex-row">
      <NavigationArrow side={side} settingsPage={settingsPage} />
      <div className="w-full">
        <canvas
          ref={canvasRef}
          className="absolute inset-0 object-contain min-h-[100%] z-20"
        />
      </div>
    </div>
  );
};