"use client";

import mixpanel from "mixpanel-browser";
import { useEffect } from "react";

export default function ClickTracker() {
  useEffect(() => {
    const handleClick = (event: MouseEvent) => {
      let target = event.target as HTMLElement;
      let data: string | null = null;
      for (let i = 0; i < 10; i++) {
        if (!target) {
          break;
        }
        if (target.hasAttribute("data-gtag")) {
          data = target.getAttribute("data-gtag");
          break;
        }
        target = target.parentElement as HTMLElement;
      }
      if (!data) {
        return;
      }

      const eventData = data
        .split(",")
        .reduce((acc: Record<string, string>, part: string) => {
          const keyValue = part.split(":");
          if (keyValue.length === 2) {
            const key = keyValue[0].trim();
            const value = keyValue[1].trim();
            acc[key] = value;
          }
          return acc;
        }, {});

      if (eventData.event) {
        const { event, ...eventProps } = eventData;
        window?.gtag("event", event, eventProps);
        mixpanel.track(event, eventProps);
      }
    };

    document.addEventListener("click", handleClick);

    return () => {
      document.removeEventListener("click", handleClick);
    };
  }, []);

  return <div></div>;
}