import MapLoading from "@/core/components/MapLayer/Loading";
import { Paper, Stack } from "@mui/material";
import dynamic from "next/dynamic";
import MarkerLocation from "./MarkerLocation";

const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
    loading: () => <MapLoading />,
    ssr: false,
});

const LocationOnMap = ({ setValue, defaultLatLon }) => {
    return (
        <Stack sx={{ height: "100%", position: "relative" }}>
            <Paper sx={{ flexGrow: 1, border: 1, borderRadius: 1, borderColor: "divider" }} elevation={0}>
                <MapLayer style={{ borderRadius: "4px" }}>
                    <MarkerLocation setValue={setValue} defaultLatLon={defaultLatLon} />
                </MapLayer>
            </Paper>
        </Stack>
    );
};
export default LocationOnMap;