import './TextMarker.css';

import React from 'react';

import { Marker, Tooltip } from 'react-leaflet';
import { LatLng } from 'leaflet';

export type TextMarkerProps = {
  text: string;
  position: LatLng;
  color?: string;
  backgroundColor?: string;
  size?: number;
};

export function TextMarker(props: TextMarkerProps) {
  const { text, position, color: colorProp, size: sizeProp, backgroundColor: backgroundColorProp } = props;
  const color = colorProp ? colorProp : 'black';
  const backgroundColor = backgroundColorProp ? backgroundColorProp : 'transparent';
  const size = sizeProp ? `${sizeProp}px` : '12px';

  return (
    <Marker position={position} opacity={0}>
      <Tooltip className="TextMarkerTooltip" direction="right" offset={[-20, 27]} permanent={true}>
        <span className="TextMarkerText" style={{ color: color, backgroundColor: backgroundColor, fontSize: size }}>
          {text}
        </span>
      </Tooltip>
    </Marker>
  );
}