/**
 * @file ScopeBadge.tsx
 * @description Small colored badge for a config artifact's scope (user /
 * project / project-local). Tool-agnostic — takes a plain string so it works
 * for Claude Code and Codex scopes alike.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { useTranslation } from "react-i18next";

export function ScopeBadge({ scope }: { scope: string }) {
  const { t } = useTranslation("ccConfig");
  const color =
    scope === "user"
      ? "bg-sky-500/10 text-sky-700 dark:text-sky-300 border-sky-500/30"
      : scope === "project"
        ? "bg-status-success/10 text-status-success border-status-success/30"
        : scope === "project-local"
          ? "bg-violet-500/10 text-violet-700 dark:text-violet-300 border-violet-500/30"
          : "bg-surface-3 text-fg-secondary border-border";
  const label =
    scope === "project-local"
      ? t("scope.projectLocal")
      : scope === "user"
        ? t("scope.user")
        : scope === "project"
          ? t("scope.project")
          : scope;
  return (
    <span className={`text-[10px] font-mono px-1.5 py-0.5 rounded border ${color}`}>{label}</span>
  );
}