"use client";

interface Props {
  score: number;
  maxScore?: number;
  label?: string;
  className?: string;
}

function scoreColor(score: number, max: number): string {
  const ratio = score / max;
  if (ratio >= 0.7) return "#198F38";
  if (ratio >= 0.5) return "#D97706";
  return "#DC2626";
}

export default function CreditScoreArc({
  score,
  maxScore = 1000,
  label = "Credit score",
  className = "",
}: Props) {
  const clamped = Math.max(0, Math.min(score, maxScore));
  const ratio = clamped / maxScore;
  const radius = 54;
  const stroke = 10;
  const circumference = Math.PI * radius;
  const dashOffset = circumference * (1 - ratio);
  const color = scoreColor(clamped, maxScore);

  return (
    <div className={`inline-flex flex-col items-center ${className}`}>
      <div className="relative w-[140px] h-[88px]">
        <svg
          viewBox="0 0 140 88"
          className="w-full h-full"
          role="img"
          aria-label={`${label}: ${clamped} out of ${maxScore}`}
        >
          <path
            d="M 16 76 A 54 54 0 0 1 124 76"
            fill="none"
            stroke="#042718"
            strokeOpacity={0.08}
            strokeWidth={stroke}
            strokeLinecap="round"
          />
          <path
            d="M 16 76 A 54 54 0 0 1 124 76"
            fill="none"
            stroke={color}
            strokeWidth={stroke}
            strokeLinecap="round"
            strokeDasharray={circumference}
            strokeDashoffset={dashOffset}
            className="transition-all duration-700 ease-out"
          />
        </svg>
        <div
          className="absolute inset-x-0 bottom-0 flex flex-col items-center"
          aria-hidden="true"
        >
          <span className="font-onest text-3xl font-bold text-[#042718] leading-none">
            {clamped}
          </span>
          <span className="font-inter text-xs text-[#042718]/40 mt-0.5">/{maxScore}</span>
        </div>
      </div>
      <span className="sr-only">
        {label}: {clamped} of {maxScore}
      </span>
    </div>
  );
}