'use client';

/**
 * Compact pill rendered on a connection card for each install instance.
 * Shows the scope + label so the user can tell apart "Global", "Project · Personal",
 * "Agent · Caretaker" at a glance.
 *
 * @param {{
 *   install: {
 *     scope: 'global'|'project'|'agent',
 *     project_id: string|null,
 *     agent_id: string|null,
 *     account_label: string|null,
 *     last_4: string|null,
 *   },
 *   projectName?: string|null,
 *   agentName?: string|null,
 * }} props
 */
export default function ConnectionScopeBadge({ install, projectName, agentName }) {
  const scope = install?.scope || 'global';
  let label;
  if (scope === 'project') label = projectName || install.project_id || 'Project';
  else if (scope === 'agent') label = agentName || install.agent_id || 'Agent';
  else label = 'Global';

  const subtitle = install?.account_label || (install?.last_4 ? `••• ${install.last_4}` : null);

  return (
    <span className={`connection-scope-badge scope-${scope}`}>
      <span className="connection-scope-badge-scope">{scope}</span>
      <span className="connection-scope-badge-label">{label}</span>
      {subtitle ? <span className="connection-scope-badge-sub">{subtitle}</span> : null}
    </span>
  );
}
