import makeStyles from '@material-ui/styles/makeStyles';
import { divIcon, LatLngTuple } from "leaflet";
import React from "react";
import { Marker } from "react-leaflet";

const useStyle = makeStyles(() => ({
  markerLayout: {
    marginTop: "-30px !important",
    marginLeft: "-13px !important",
    fontSize: "35px",
  },
  red: {
    color: "red",
  },
  blue: {
    color: "blue",
  },
}));

const FromToMarker = ({
  position,
  type,
}: {
  position: LatLngTuple;
  type: "from" | "to";
}) => {
  const classes = useStyle();
  const color = type === "from" ? classes.blue : classes.red;
  const fromIcon = divIcon({
    className: `fas fa-map-marker-alt ${classes.markerLayout} ${color}`,
  });
  return <Marker position={position} icon={fromIcon} />;
};

export default FromToMarker;