import classnames from 'classnames';
import styles from './styles.module.scss';
import getActiveGeo from './useActiveGeo';

/**
 * Adds an additional layer to style an active geography highlighted by the tooltip
 */
const ActiveGeo = function ActiveGeo(props) {
  const {
    tooltip,
    mapId
  } = props;
  const activeGeo = getActiveGeo(tooltip, mapId);
  if (!activeGeo) return null;
  return <g>
      <path className={classnames(styles.shape, {
      [styles.active]: !!activeGeo
    })} d={activeGeo} />
    </g>;
};
export default ActiveGeo;