content: import React from 'react';
  import PropTypes from 'prop-types';
  import { OverlayView } from "react-google-maps";
  import getPixelPositionOffset from '../utils/getPixelPositionOffset';
  
  const MarkerCard = props => {
  
    const handleMouseLeave = () => {
      props.onMouseLeave();
    };
  
    return (
      <OverlayView
        getPixelPositionOffset={getPixelPositionOffset}
        mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
        position={{lat: props.marker.lat, lng: props.marker.lng}}
      >
        <div
          className="card marker-card"
          onMouseLeave={handleMouseLeave}
        >
          <div>{props.marker.name}</div>
          {props.marker.contention &&
            <div>Town is contested</div>
          }
        </div>
      </OverlayView>
    );
  }
  
  MarkerCard.propTypes = {
    marker: PropTypes.shape({
      contention: PropTypes.string,
      hasHcHqUnit: PropTypes.bool,
      hasHcUnit: PropTypes.bool,
      hasHqUnit: PropTypes.bool,
      hcUnitClassName: PropTypes.string,
      hcUnitCountryCode: PropTypes.string,
      lat: PropTypes.number,
      lng: PropTypes.number,
      markerType: PropTypes.string,
      name: PropTypes.string,
      numberOfHcUnits: PropTypes.number,
      showOnZoomedOut: PropTypes.bool,
      type: PropTypes.string,
      wiretap: PropTypes.shape({
        ao: PropTypes.object,
        facilities: PropTypes.array,
        hcUnits: PropTypes.shape({
          1: PropTypes.array,
          2: PropTypes.array,
          3: PropTypes.array,
          4: PropTypes.array,
        }),
      }),
    }),
    onMouseLeave: PropTypes.func,
  };
  
  export default MarkerCard;
  