"use client";

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

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

const MapBox = ({mapBoxData, setMapBoxData}) => {
    return (
        <Stack spacing={1} sx={{height: "500px"}}>
            <Box sx={{
                p: 1,
                border: "1px dashed",
                borderColor: "divider",
                borderRadius: 1,
                height: "100%"
            }}>
                <Box
                    sx={{
                        height: "100%",
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                    }}
                >
                    <MapLayer>
                        <ChooseLocation mapBoxData={mapBoxData} setMapBoxData={setMapBoxData}/>
                    </MapLayer>
                </Box>
            </Box>
        </Stack>
    );
};
export default MapBox;