import ColourPicker from "./colourPicker";
import type { Region } from "../../../types/types";

type RegionSelectorProps = {
  regions: Region[];
  selectedRegionIndex: number;
  onSelectRegion: (index: number) => void;
  onChangeRegionColour: (index: number, colour: string) => void;
};

const RegionSelector = ({
  regions,
  selectedRegionIndex,
  onSelectRegion,
  onChangeRegionColour,
}: RegionSelectorProps) => {
  return (
    <div>
      <div>
        <h2>Region Select</h2>
      </div>
      <div>
        {regions.map((region, idx) => (
          <div key={region.name}>
            <label style={{ marginRight: "0.5rem" }}>
              <input type="radio" checked={selectedRegionIndex === idx} onChange={() => onSelectRegion(idx)} />{" "}
              {region.name}
            </label>
            <ColourPicker colour={region.brushColour} setColour={(c: string) => onChangeRegionColour(idx, c)} />
          </div>
        ))}
      </div>
    </div>
  );
};

export default RegionSelector;