"use client";

import React from "react";
import { Button } from "../Button";
import { useAnalytics } from "./useAnalytics";
import { AnalyticsEvents } from "./analytics-events";

// Since ButtonProps is not exported from Button.tsx, we define a compatible interface
interface ButtonProps {
  href: string; // Correctly matching Button.tsx which has href as required
  children: React.ReactNode;
  variant?: "primary" | "outline" | "ghost";
  size?: "normal" | "large";
  className?: string;
  showArrow?: boolean;
  [key: string]: any; // Allow other props
}

interface TrackedButtonProps extends ButtonProps {
  eventName?: string;
  eventProperties?: Record<string, any>;
  onClick?: (e: React.MouseEvent<any>) => void;
}

/**
 * A wrapper around the project's Button component that tracks click events.
 */
export function TrackedButton({
  eventName = AnalyticsEvents.BUTTON_CLICK,
  eventProperties = {},
  onClick,
  ...props
}: TrackedButtonProps) {
  const { trackEvent } = useAnalytics();

  const handleClick = (e: React.MouseEvent<any>) => {
    trackEvent(eventName, {
      ...eventProperties,
      label:
        typeof props.children === "string"
          ? props.children
          : eventProperties.label,
    });
    if (onClick) onClick(e);
  };

  return <Button {...props} onClick={handleClick} />;
}
