function RankBadge({ rank: inputRank, size = "md", showLp = true, }) {
    const rank = inputRank || { division: 4, name: "madera", color: "#8f7b63", metal: "#4e4033", lp: 0, lpMax: 100 };
    const dim = size === "lg" ? 88 : size === "md" ? 64 : 40;
    const roman = rank.division ? { 1: "I", 2: "II", 3: "III", 4: "IV" }[rank.division] : "";
    return (<div className="flex items-center gap-3">
      <div className="relative grid place-items-center" style={{ width: dim, height: dim }} aria-hidden>
        <svg viewBox="0 0 80 80" width={dim} height={dim}>
          <polygon points="40,4 72,22 72,58 40,76 8,58 8,22" fill={rank.metal} stroke={rank.color} strokeWidth="3"/>
          <polygon points="40,14 64,28 64,52 40,66 16,52 16,28" fill={rank.color} opacity="0.9"/>
          <text x="40" y={roman ? "42" : "46"} textAnchor="middle" fill="#1c1410" fontSize={roman ? "16" : "11"} fontWeight="700" fontFamily="Pixelify Sans, sans-serif">
            {roman || rank.name.slice(0, 2).toUpperCase()}
          </text>
        </svg>
      </div>
      <div className="min-w-0">
        <p className={cn("font-display text-cream", size === "lg" ? "text-lg" : "text-sm")}>
          {rankLabel(rank)}
        </p>
        {showLp ? (<div className="mt-1 w-[140px]">
            {rank.lpMax > 0 ? (<>
                <div className="rank-progress-track" role="progressbar" aria-valuemin="0" aria-valuemax={rank.lpMax} aria-valuenow={rank.lp}>
                  <div className="rank-progress-fill" style={{ width: `${Math.max(0, Math.min(100, (Number(rank.lp) / Number(rank.lpMax || 1)) * 100))}%` }} />
                </div>
                <p className="mt-1 font-mono text-[10px] tabular-nums text-cream/70">
                  {rank.lp} / {rank.lpMax} LP
                </p>
              </>) : (<p className="font-mono text-[10px] tabular-nums text-cream/70">{rank.lp} LP</p>)}
          </div>) : null}
      </div>
    </div>);
}