import PlateRead from "./components/plateRead/PlateRead";
import SightingStack from "./components/sightingStack/SightingStack";
import VideoFeed from "./components/videoFeed/VideoFeed";
import { useSightingList } from "./hooks/useSightingList";
import { useCameraSettingsContext } from "../../app/context/CameraSettingsContext";
import SystemOverview from "./SystemOverview/SystemOverview";

const Dashboard = () => {
  const { sightingList, isLoading, totalSightings } = useSightingList();
  const { state: cameraSettings } = useCameraSettingsContext();
  const size = cameraSettings.imageSize;

  const mostRecent = sightingList[0];

  return (
    <div className="flex flex-col">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-5">
        <VideoFeed mostRecentSighting={mostRecent} isLoading={isLoading} size={size} />
        <SightingStack sightings={sightingList} />
      </div>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-2 md:gap-5 items-center">
        <div className="col-span-1">
          <PlateRead sighting={mostRecent} />
        </div>
        <div className="col-span-2">
          <SystemOverview totalSightings={totalSightings} />
        </div>
      </div>
    </div>
  );
};

export default Dashboard;