import L from "leaflet";
import { useRef, useMemo } from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";

const OSMapComponent = (props) => {
    const { center, zoom } = props;
    const markerRef = useRef(null);
    let data = [center];

    // const ModelsMap = (map, maps) => {
    //     //instantiate array that will hold your Json Data
    //     let dataArray = [];
    //     //push your Json Data in the array
    //     {
    //         data.map((markerJson) => dataArray.push(markerJson));
    //     }

    //     //Loop through the dataArray to create a marker per data using the coordinates in the json
    //     for (let i = 0; i < dataArray.length; i++) {
    //         let marker = new maps.Marker({
    //             position: { lat: dataArray[i].lat, lng: dataArray[i].lng },
    //             map,
    //             label: dataArray[i].id,
    //         });
    //     }
    // };

    return (
        <MapContainer center={center} zoom={zoom}>
            <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />

            <Marker position={center} ref={markerRef}>
                <Popup>hello</Popup>
            </Marker>
        </MapContainer>
    );
};
export default OSMapComponent;