import React, { useEffect, useRef } from "react";
import { useMapApi } from "./mapApi";
import { Map, View } from "ol";

interface Props {
    children: React.ReactNode;
}

export function MapContainer({ children }: Props) {
    const mapDivRef = useRef<HTMLDivElement>(null);
    const { initializeMap } = useMapApi();
    useEffect(() => {
        if (!mapDivRef.current) return;
        const map = new Map({
            target: mapDivRef.current,
            layers: [],
            view: new View({
                center: [0, 0],
                zoom: 1,
            })
        });
        initializeMap(map);
    }, [mapDivRef.current, initializeMap]);

    return <div ref={mapDivRef}>
        {children}
    </div>;
}