import React from "react";
import { Map as KendoMap } from "@progress/kendo-react-map";
import { MapProps } from "./MapProps";

const Map: React.FC<MapProps> = ({
  dataTestId,
  children,
  center,
  className,
  controls,
  dir,
  maxZoom,
  minSize,
  minZoom,
  pannable,
  style,
  wraparound,
  zoom,
  zoomable,
  onBeforeReset,
  onMapClick,
  onMarkerActivate,
  onMarkerClick,
  onMarkerCreated,
  onPan,
  onPanEnd,
  onRefresh,
  onReset,
  onShapeClick,
  onShapeCreated,
  onShapeFeatureCreated,
  onShapeMouseEnter,
  onShapeMouseLeave,
  onZoomEnd,
  onZoomStart,
}) => (
  <div data-test-id={dataTestId}>
    <KendoMap
      center={center}
      className={className}
      controls={controls}
      dir={dir}
      maxZoom={maxZoom}
      minSize={minSize}
      minZoom={minZoom}
      pannable={pannable}
      style={style}
      wraparound={wraparound}
      zoom={zoom}
      zoomable={zoomable}
      onBeforeReset={onBeforeReset}
      onMapClick={onMapClick}
      onMarkerActivate={onMarkerActivate}
      onMarkerClick={onMarkerClick}
      onMarkerCreated={onMarkerCreated}
      onPan={onPan}
      onPanEnd={onPanEnd}
      onRefresh={onRefresh}
      onReset={onReset}
      onShapeClick={onShapeClick}
      onShapeCreated={onShapeCreated}
      onShapeFeatureCreated={onShapeFeatureCreated}
      onShapeMouseEnter={onShapeMouseEnter}
      onShapeMouseLeave={onShapeMouseLeave}
      onZoomEnd={onZoomEnd}
      onZoomStart={onZoomStart}
    >
      {children}
    </KendoMap>
  </div>
);

export default Map;