import { useEffect } from 'react';
import ReactGA from 'react-ga';

export interface EventInfo {
  eventCategory: string,
  eventAction: string,
  eventLabel: string,
}

const useGAClickTracking = (elementRef: Element | undefined, eventInfo: EventInfo) => {
  const trackEvent = (category: string, action: string, label: string) => ReactGA.event({
    category,
    action,
    label,
  }); 

  useEffect(() => {
    const handleClick = () => {
      trackEvent(eventInfo.eventCategory, eventInfo.eventAction, eventInfo.eventLabel);
    };
    
    elementRef?.addEventListener('click', handleClick);
  
    return () => {
      elementRef?.removeEventListener('click', handleClick);
    };
  }, [ elementRef ]);

};

export default useGAClickTracking;