import type { ReactNode } from 'react';

type UntranslatedProps = {
  children: ReactNode;
  /**
   * Why this text is not localized. Required so the decision is legible at the call site.
   *
   * `foreign-ui-label` — quoted from another product's interface ("click **Enable**"). It has to match
   *   what the reader sees on THEIR screen, and that product localizes by its own account language.
   * `product-name` — the name of a product or feature: Tmux, Neovim, Claude Code, Officer. The doc's
   *   never-translate list covers these directly.
   */
  reason: 'foreign-ui-label' | 'product-name';
  className?: string;
};

/**
 * Text that is deliberately NOT localized, marked as such where it is written.
 *
 * The first reason was `foreign-ui-label`: a label quoted from another product's interface, which
 * docs/localization.md classifies as an identifier rather than prose. "Click **Enable**" has to match
 * what the reader sees on Google's screen, and Google localises by their Google account language rather
 * than by ours — so translating it sends somebody hunting for "Ativar" in a console that says "Enable".
 *
 * It exists as a component rather than a comment for two reasons. It states the decision at every call
 * site, where the next person editing the sentence will see it. And it gives the scanner something exact
 * to skip: without that, ~40 labels that MUST stay English count as debt forever, and the area can never
 * be held at zero — the same trap as counting `new Error()` messages.
 *
 * `reason` is a closed union on purpose. A second legitimate reason should be argued for and added here,
 * not smuggled in as free text.
 */
export const Untranslated = ({ children, className }: UntranslatedProps) => (
  <strong className={className}>{children}</strong>
);