import { useState } from "react";

import VideoFeedGridPainter from "./VideoFeedGridPainter";
import CameraSettings from "./CameraSettings";
import type { Region } from "../../../types/types";

const CameraGrid = () => {
  const [regions, setRegions] = useState<Region[]>([
    { name: "Region 1", brushColour: "#ff0000" },
    { name: "Region 2", brushColour: "#00ff00" },
  ]);
  const [selectedRegionIndex, setSelectedRegionIndex] = useState(0);

  const updateRegionColour = (index: number, newColour: string) => {
    setRegions((prev) => prev.map((r, i) => (i === index ? { ...r, brushColour: newColour } : r)));
  };
  return (
    <div className="grid grid-cols-1 md:grid-cols-2">
      <VideoFeedGridPainter regions={regions} selectedRegionIndex={selectedRegionIndex} />
      <CameraSettings
        regions={regions}
        selectedRegionIndex={selectedRegionIndex}
        onSelectRegion={setSelectedRegionIndex}
        onChangeRegionColour={updateRegionColour}
      />
    </div>
  );
};

export default CameraGrid;
