'use client';

import React from 'react';
import { Button, ButtonProps } from '../ui/Button';
import { useAnalytics } from './useAnalytics';
import { AnalyticsEvents } from './analytics-events';

interface TrackedButtonProps extends ButtonProps {
  eventName?: string;
  eventProperties?: Record<string, any>;
}

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

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

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