import { useEffect, type FC } from "react";
import { useMap } from "react-leaflet";

import { MAP_OBJECT_ZOOM } from "../../../constants";
import { AssetModel } from "@/contracts/client.schemas";

import { MapObject } from "./MapObject";

interface Props {
	asset: AssetModel;
}
export const MovableMapObject: FC<Props> = ({ asset }) => {
	const map = useMap();

	useEffect(() => {
		if (!asset.latitude || !asset.longitude) {
			return;
		}

		map.flyTo([asset.latitude, asset.longitude], MAP_OBJECT_ZOOM);
	}, [asset, map]);

	return <MapObject asset={asset} withoutPopup />;
};
