import { CircleMarker, MapContainer, TileLayer } from 'react-leaflet';
import { UpdateMapCenter } from './MapView';
import { mapTypes } from '../constants/maptypes';
import { tileUrls } from '../constants/tileUrls';
import './Minimap.css';
import type { MovingPointInfo } from '../types';

interface MiniMapProps {
  pointPosition: MovingPointInfo;
  mapType: string;
}

export default function MiniMap({ pointPosition, mapType }: MiniMapProps) {
  return (
    <div className="mini-map"
      style={{
        top: pointPosition.y,
        left: pointPosition.x,
      }}>
      <MapContainer center={pointPosition.latlng} zoom={25} zoomControl={false}>
        {mapType === mapTypes.classic
          ? <TileLayer url={tileUrls.classic} />
          : <TileLayer url={tileUrls.satellite} />
        }
        <CircleMarker center={pointPosition.latlng} radius={2} color="red" />
        <UpdateMapCenter currentPosition={pointPosition.latlng} />
      </MapContainer>
    </div>
  );
}
