/**
 * ProvenanceIndicator Component
 * Shows which instance data came from with PDA-friendly design
 */

interface ProvenanceIndicatorProps {
  instanceId: string;
  instanceName: string;
  instanceUrl: string;
  compact?: boolean;
  color?: string;
  showIcon?: boolean;
}

export function ProvenanceIndicator({
  instanceId,
  instanceName,
  instanceUrl,
  compact = false,
  color = "bg-gray-100",
  showIcon = false,
}: ProvenanceIndicatorProps): React.JSX.Element {
  const paddingClass = compact ? "px-2 py-0.5 text-xs" : "px-3 py-1 text-sm";
  const tooltipText = `From: ${instanceName} (${instanceUrl})`;

  return (
    <div
      className={`inline-flex items-center gap-1 ${paddingClass} ${color} text-gray-700 rounded-full font-medium`}
      title={tooltipText}
      data-instance-id={instanceId}
    >
      {showIcon && <span>🔗</span>}
      <span>{instanceName}</span>
    </div>
  );
}
