import React from 'react';
import { MapContainer, ImageOverlay, Marker } from 'react-leaflet';
import L from 'leaflet';
import ReactDOMServer from 'react-dom/server';
export const FluentImageMap = ({ onClick, coordinates, bounds, style, dragging = false, doubleClickZoom = false, scrollWheelZoom = false, attributionControl = false, zoomControl = false, IconComponent, MapTile }) => {
    const createDivIcon = (item) => new L.DivIcon({
        className: 'custom-div-icon',
        html: ReactDOMServer.renderToString(React.createElement(IconComponent, { available: item.status })),
        iconSize: [28, 28],
        iconAnchor: [14, 28],
    });
    return (React.createElement(MapContainer, { crs: L.CRS.Simple, bounds: bounds, style: style, dragging: dragging, doubleClickZoom: doubleClickZoom, scrollWheelZoom: scrollWheelZoom, attributionControl: attributionControl, zoomControl: zoomControl }, React.createElement(ImageOverlay, { bounds: bounds, url: MapTile }), coordinates && coordinates.map((item, index) => {
        var _a;
        return (React.createElement(Marker, { key: (_a = item.title) !== null && _a !== void 0 ? _a : index, icon: createDivIcon(item), position: [item.long, item.lat], eventHandlers: { click: () => onClick(item.title) } }));
    })));
};
//# sourceMappingURL=FluentImageMap.js.map