/**
 * A tiny circular progress ring showing one row's share of a total, for a
 * table where a bar would take a whole column but a ring fits inline next to
 * the label it belongs to.
 */
export function WeightRing({ pct, size = 22, thickness = 3 }: { pct: number; size?: number; thickness?: number }) {
  const clamped = Math.max(0, Math.min(100, pct));
  const radius = (size - thickness) / 2;
  const circumference = 2 * Math.PI * radius;
  const offset = circumference * (1 - clamped / 100);
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className="shrink-0" role="img" aria-label={`${clamped.toFixed(1)}% of portfolio`}>
      <circle cx={size / 2} cy={size / 2} r={radius} fill="none" stroke="hsl(var(--border))" strokeWidth={thickness} />
      <circle
        cx={size / 2}
        cy={size / 2}
        r={radius}
        fill="none"
        stroke="hsl(var(--primary))"
        strokeWidth={thickness}
        strokeLinecap="round"
        strokeDasharray={circumference}
        strokeDashoffset={offset}
        transform={`rotate(-90 ${size / 2} ${size / 2})`}
      />
    </svg>
  );
}