import { useState } from "react";

import VideoFeedGridPainter from "./Video/VideoFeedGridPainter";
import CameraSettings from "./CameraSettings/CameraSettings";

import PlatePatch from "./PlatePatch/SightingPatch";

const CameraGrid = () => {
  const [tabIndex, setTabIndex] = useState(0);

  return (
    <div className="flex flex-col gap-4 p-4 md:grid md:grid-cols-5 md:grid-rows-5 md:max-h-screen md:gap-0 md:p-0">
      <VideoFeedGridPainter />
      <CameraSettings tabIndex={tabIndex} setTabIndex={setTabIndex} />
      <PlatePatch />
    </div>
  );
};

export default CameraGrid;