"use client";

import { Box } from "@mui/material";
import dynamic from "next/dynamic";
import MapLoading from "@/core/components/MapLayer/Loading";
import FlyToPolyGon from "./FlyToPolygon";

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

const DetailMap = ({ data }) => {
    return (
        <Box
            sx={{
                width: "100%",
                height: "200px",
                border: "1px solid #e1e1e1",
                borderRadius: 2,
                my: 3,
            }}
        >
            <Box
                sx={{
                    height: "100%",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                }}
            >
                <MapLayer>
                    <FlyToPolyGon polygon={data.polygon} />
                </MapLayer>
            </Box>
        </Box>
    );
};
export default DetailMap;