/* ============================================================================
 * 서명전에 — TDS Badge 컴포넌트
 *  · 상태를 빠르게 인식할 수 있도록 강조
 *  · props:
 *      size     "xsmall" | "small" | "medium" | "large"   (default "small")
 *      variant  "fill"   | "weak"                          (default "weak")
 *      color    "blue" | "teal" | "green" | "red" | "yellow" | "elephant"
 *                                                          (default "blue")
 *      children 본문 텍스트
 *      className  추가 클래스 (선택)
 *  · 모든 값은 components.css 의 TDS 토큰/규칙을 참조 — 하드코딩 없음
 * ========================================================================== */

function Badge({
  size = "small",
  variant = "weak",
  color = "blue",
  className = "",
  children,
  ...rest
}) {
  const cls = [
    "badge",
    `badge--${size}`,
    `badge--${variant}-${color}`,
    className,
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <span className={cls} {...rest}>
      {children}
    </span>
  );
}

window.Badge = Badge;

Object.assign(window, { Badge });