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

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