import { useRef } from "react";
import useClickMarker from "../../../../hooks/useClickMarker";
import { useGameConfig } from "../../../../hooks/useGameInfo";
import useMap from "../../../../hooks/useMap";
import useMapBounds from "../../../../hooks/useMapBounds";
import styles from "./GuessPane.module.css";

const ClickMarkerMap = ({ onMarkerMoved }) => {
  const mapDivRef = useRef(null);
  const mapRef = useMap(mapDivRef);
  useClickMarker(mapRef, onMarkerMoved);
  const { countryLock } = useGameConfig();
  useMapBounds(mapRef, countryLock);
  return <div className={styles.map} ref={mapDivRef} />;
};

export default ClickMarkerMap;
