"use client";

import { useTranslation } from "@enode/core/translations/hooks";

/**
 * The "Invalid" chip — the shared textual half of the invalid-rep convention,
 * next to the muted grey used for rep marks (`repMarkFillStyle`).
 *
 * Negative red on the negative surface (`feedback-error` on
 * `feedback-error-surface`) so a ruled-out rep is unmistakable at a glance in a
 * dense rep list. This is the same negative chip the portal uses for a failed
 * attempt, so the two apps read alike. The surface is opaque, which also lets
 * the chip float over scrolling columns without a backing layer.
 *
 * Rendered wherever a rep is shown as a row, cell or pill — a mark-only cue
 * would be ambiguous next to "deleted" or "no sensor data".
 * See `docs/invalid-reps.md`.
 */
export function InvalidRepBadge({ className = "" }: { className?: string }) {
  const { t } = useTranslation();
  return (
    <span
      className={`stat-small shrink-0 rounded-full bg-feedback-error-surface px-2 py-0.5 uppercase text-feedback-error ${className}`}
    >
      {t("Invalid")}
    </span>
  );
}