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

import Loading from "../UI/Loading";
import ErrorState from "../UI/ErrorState";
type SnapshotContainerProps = {
  side: string;
  settingsPage?: boolean;
  zoomLevel?: number;
  onZoomLevelChange?: (level: number) => void;
};

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

  return (
    <div className="flex flex-col md:flex-row">
      <NavigationArrow side={side} settingsPage={settingsPage} />
      <div className="w-full bg-[#253445] rounded-md overflow-hidden md:h-[500px] lg:h-[70vh]">
        {isError && <ErrorState />}
        {isPending && (
          <div className="absolute inset-0 grid place-items-center">
            <Loading message="Camera Preview" />
          </div>
        )}
        <canvas ref={canvasRef} className="absolute w-full h-full z-20" />
      </div>
    </div>
  );
};