CedarCopilot/cedar-mail

import { Eye, MousePointerClick } from 'lucide-react';

interface TrackingSummaryProps {
  trackingData: {
    trackingId: string;
    openCount: number;
    clickCount: number;
    firstOpenedAt: Date | null;
    lastOpenedAt: Date | null;
    firstClickedAt: Date | null;
    openTrackingEnabled: boolean;
    linkTrackingEnabled: boolean;
  };
}

/**
 * Compact inline tracking summary for CRM conversation timeline.
 * Shows open and click counts inline with event title.
 */
export function TrackingSummary({ trackingData }: TrackingSummaryProps) {
  const { openCount, clickCount, openTrackingEnabled, linkTrackingEnabled } = trackingData;

  // Don't show if tracking is disabled
  if (!openTrackingEnabled && !linkTrackingEnabled) {
    return null;
  }

  // Don't show if no activity
  const hasActivity = openCount > 0 || clickCount > 0;
  if (!hasActivity) {
    return null;
  }

  return (
    <span className="text-xs text-muted-foreground inline-flex items-center gap-2 ml-2">
      {openTrackingEnabled && openCount > 0 && (
        <span className="inline-flex items-center gap-1">
          <Eye className="h-3 w-3" />
          <span>{openCount}</span>
        </span>
      )}
      {linkTrackingEnabled && clickCount > 0 && (
        <span className="inline-flex items-center gap-1">
          <MousePointerClick className="h-3 w-3" />
          <span>{clickCount}</span>
        </span>
      )}
    </span>
  );
}