const SemiCircleProgress = ({ progress = 60, years = 4.02 }) => {
  const clampedProgress = Math.min(Math.max(progress, 0), 100);
  const radius = 80;
  const strokeWidth = 26;
  const circumference = Math.PI * radius;
  const strokeDashoffset =
    circumference - (clampedProgress / 100) * circumference;

  return (
    <div className="svg-half-donut">
      <svg width="200" height="100" viewBox="0 0 200 100">
        {/* Background track */}
        <path
          d="M20,100 A80,80 0 0,1 180,100"
          fill="none"
          stroke="#6F6F7A"
          strokeWidth={strokeWidth}
        />
        {/* Progress track */}
        <path
          d="M20,100 A80,80 0 0,1 180,100"
          fill="none"
          stroke="url(#paint0_linear_4200_2273)"
          strokeWidth={strokeWidth}
          strokeDasharray={circumference}
          strokeDashoffset={strokeDashoffset}
          strokeLinecap="round"
        />
        <defs>
          <linearGradient
            id="paint0_linear_4200_2273"
            x1="26.7278"
            y1="279.417"
            x2="298.886"
            y2="65.0002"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#3D3795" />
            <stop offset="0.535019" stopColor="#2A9BCF" />
            <stop offset="1" stopColor="#0DB3F4" />
          </linearGradient>
        </defs>
      </svg>
      <div className="label-wrapper">
        <div className="label">{years}</div>
        <div className="label-content">Years</div>
      </div>
    </div>
  );
};

export default SemiCircleProgress;
