interface ComplianceGaugeProps {
  percentage: number;
  size?: "sm" | "md" | "lg";
}

export default function ComplianceGauge({
  percentage,
  size = "md",
}: ComplianceGaugeProps) {
  const getColor = (p: number) => {
    if (p < 30) return "#ef4444";
    if (p < 50) return "#f97316";
    if (p < 70) return "#eab308";
    return "#22c55e";
  };

  const color = getColor(percentage);

  const sizes = {
    sm: { outer: 64, radius: 26, stroke: 5, text: "text-lg", label: "text-[8px]" },
    md: { outer: 96, radius: 40, stroke: 6, text: "text-2xl", label: "text-[10px]" },
    lg: { outer: 128, radius: 54, stroke: 8, text: "text-3xl", label: "text-xs" },
  };

  const s = sizes[size];
  const circumference = 2 * Math.PI * s.radius;
  const strokeDasharray = `${(percentage / 100) * circumference} ${circumference}`;
  const viewBox = `0 0 ${s.outer + 4} ${s.outer + 4}`;
  const center = (s.outer + 4) / 2;

  return (
    <div className="relative inline-flex items-center justify-center" style={{ width: s.outer + 4, height: s.outer + 4 }}>
      <svg className="-rotate-90" viewBox={viewBox} width={s.outer + 4} height={s.outer + 4}>
        <circle
          cx={center}
          cy={center}
          r={s.radius}
          fill="none"
          stroke="#1f2937"
          strokeWidth={s.stroke}
        />
        <circle
          cx={center}
          cy={center}
          r={s.radius}
          fill="none"
          stroke={color}
          strokeWidth={s.stroke}
          strokeLinecap="round"
          strokeDasharray={strokeDasharray}
          className="transition-all duration-700"
        />
      </svg>
      <div className="absolute inset-0 flex flex-col items-center justify-center">
        <span className={`font-bold text-white ${s.text}`}>
          {Math.round(percentage)}
        </span>
        <span className={`text-gray-500 ${s.label}`}>%</span>
      </div>
    </div>
  );
}
