import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { Dot } from 'recharts';

function CustomActiveDot(props) {
  useEffect(() => {
    props.setActiveCoordinate({ x: props.cx, y: props.cy });

    return () => {
      props.setActiveCoordinate(null);
    };
  }, []);

  return <Dot {...props} />;
}

CustomActiveDot.propTypes = {
  cx: PropTypes.number.isRequired,
  cy: PropTypes.number.isRequired,
  setActiveCoordinate: PropTypes.func.isRequired,
};

export default CustomActiveDot;
