import { cn } from "@/lib/utils";

export function ScoreRing({
  value,
  size = 96,
  strokeWidth = 8,
  label,
  className,
  tone = "cyan",
}: {
  value: number;
  size?: number;
  strokeWidth?: number;
  label?: string;
  className?: string;
  tone?: "cyan" | "purple";
}) {
  const radius = (size - strokeWidth) / 2;
  const circumference = 2 * Math.PI * radius;
  const offset = circumference - (value / 100) * circumference;
  const strokeColor = tone === "cyan" ? "var(--brand-cyan)" : "var(--brand-purple)";

  return (
    <div
      className={cn("relative inline-flex items-center justify-center", className)}
      style={{ width: size, height: size }}
      role="img"
      aria-label={`${label ?? "Score"}: ${value} out of 100`}
    >
      <svg width={size} height={size} className="-rotate-90">
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          fill="none"
          stroke="var(--border)"
          strokeWidth={strokeWidth}
        />
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          fill="none"
          stroke={strokeColor}
          strokeWidth={strokeWidth}
          strokeDasharray={circumference}
          strokeDashoffset={offset}
          strokeLinecap="round"
        />
      </svg>
      <div className="absolute inset-0 flex flex-col items-center justify-center">
        <span className="text-xl font-semibold text-foreground">{value}</span>
        {label ? (
          <span className="text-[10px] font-medium tracking-wide text-muted-foreground uppercase">
            {label}
          </span>
        ) : null}
      </div>
    </div>
  );
}