'use client';

import React from 'react';
import Link from 'next/link';
import { useAnalytics } from './useAnalytics';
import { AnalyticsEvents } from './analytics-events';

interface TrackedLinkProps {
  href: string;
  eventName?: string;
  eventProperties?: Record<string, any>;
  className?: string;
  children: React.ReactNode;
  onClick?: () => void;
}

/**
 * A wrapper around next/link that tracks the click event.
 * Useful for adding tracking to server components.
 */
export default function TrackedLink({
  href,
  eventName = AnalyticsEvents.LINK_CLICK,
  eventProperties = {},
  className,
  children,
  onClick,
}: TrackedLinkProps) {
  const { trackEvent } = useAnalytics();

  const handleClick = (e: React.MouseEvent) => {
    trackEvent(eventName, {
      href,
      ...eventProperties,
    });
    if (onClick) onClick();
  };

  return (
    <Link href={href} className={className} onClick={handleClick}>
      {children}
    </Link>
  );
}
