import { badgeIcon } from "@/lib/badgeIcons";
import type { Badge } from "@/lib/api";

/**
 * 徽章 pill：图标 + 名称，配色由后台设定的 CSS token 决定
 * （color: gold/accent/ok/danger/info/purple/teal → var(--token)）。
 * 仅色板内的值生效，异常值回落 accent。
 */
export default function BadgeChip({
  badge,
  tip,
  className = "",
}: {
  badge: Pick<Badge, "name" | "icon" | "color">;
  /** 悬浮提示（默认徽章名；徽章墙可传名称+授予时间） */
  tip?: string;
  className?: string;
}) {
  const Icon = badgeIcon(badge.icon);
  const color = `var(--${badge.color}, var(--accent))`;
  const soft = `var(--${badge.color}-soft, var(--accent-soft))`;

  return (
    <span
      className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11.5px] font-medium leading-[1.5] whitespace-nowrap select-none transition-transform duration-200 hover:-translate-y-[1px] ${className}`}
      style={{ background: soft, color }}
      data-tip={tip ?? badge.name}
    >
      <Icon size={12} className="shrink-0" />
      {badge.name}
    </span>
  );
}