shoc-frontend-new/src/components/domain/doc-badge.tsx

import CheckIcon from "@mui/icons-material/Check";
import CloseIcon from "@mui/icons-material/Close";
import RemoveIcon from "@mui/icons-material/Remove";

export type DocVariant = "yes" | "no" | "nn";

const DOC_TOKENS: Record<DocVariant, { bg: string; text: string }> = {
  yes: { bg: "var(--doc-yes-bg)", text: "var(--doc-yes-text)" },
  no: { bg: "var(--doc-no-bg)", text: "var(--doc-no-text)" },
  nn: { bg: "var(--doc-nn-bg)", text: "var(--doc-nn-text)" },
};

const DOC_LABELS: Record<DocVariant, string> = {
  yes: "Yes",
  no: "No",
  nn: "N/A",
};

type DocBadgeProps = {
  variant: DocVariant;
  label?: string;
  showIcon?: boolean;
};

export function DocBadge({ variant, label, showIcon = true }: DocBadgeProps) {
  const tokens = DOC_TOKENS[variant];

  const icon =
    variant === "yes" ? (
      <CheckIcon sx={{ fontSize: 11 }} />
    ) : variant === "no" ? (
      <CloseIcon sx={{ fontSize: 11 }} />
    ) : (
      <RemoveIcon sx={{ fontSize: 11 }} />
    );

  return (
    <span
      className="inline-flex items-center gap-1"
      style={{
        fontSize: 12,
        fontWeight: 500,
        padding: "3px 8px",
        borderRadius: 4,
        background: tokens.bg,
        color: tokens.text,
      }}
    >
      {showIcon && icon}
      {label ?? DOC_LABELS[variant]}
    </span>
  );
}