"use client";

import styles from "./CircleArrow.module.scss";

interface ICircleArrowProps {
  width: number;
  value: number;
  uniqueKey: number | string;
  color?: string;
}

function CircleArrow({
  width,
  value,
  uniqueKey,
  color = "#7337A8",
}: ICircleArrowProps) {
  const getOffset = (_value: number) => {
    if (value === 0) {
      return 0;
    }
    return _value;
  };

  const getWidth = (_value: number) => {
    if (_value < 0) return 0;
    return _value;
  };

  return (
    <svg
      width={getWidth(width)}
      height="12"
      viewBox={`0 0 ${getWidth(width)} 12`}
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={styles.arrow}
    >
      <path
        d={`M ${getWidth(width - 11.3333)} 6.15234 C ${getWidth(
          width - 11.3333
        )} 9.09786 ${getWidth(width - 8.9455)} 11.4857 ${getWidth(
          width - 6
        )} 11.4857 C ${getWidth(width - 3.0545)} 11.4857 ${getWidth(
          width - 0.6667
        )} 9.09786 ${getWidth(width - 0.6667)} 6.15234 C ${getWidth(
          width - 0.6667
        )} 3.20683 ${getWidth(width - 3.0545)} 0.81901 ${getWidth(
          width - 6
        )} 0.81901 C ${getWidth(width - 8.9455)} 0.81901 ${getWidth(
          width - 11.3333
        )} 3.20683 ${getWidth(
          width - 11.3333
        )} 6.15234 ZM 0 7.15234 H ${getWidth(
          width - 6
        )} V 5.15234 H 0 V 7.15234 Z`}
        fill={`url(#linear_gradient_${uniqueKey})`}
      />
      <defs>
        <linearGradient
          id={`linear_gradient_${uniqueKey}`}
          x1="0"
          y1="6.65234"
          x2={getWidth(width)}
          y2="6.65234"
          gradientUnits="userSpaceOnUse"
        >
          {/* <stop offset={0.3} stop-color={color} />
          <stop offset={0.35} stop-color={color} stop-opacity="0.3" />
          <stop offset={0.4} stop-color={color} stop-opacity="0.3" /> */}
          <stop offset={getOffset(value)} stopColor={color} />
          <stop
            offset={getOffset(value + 0.0001)}
            stopColor={color}
            stopOpacity="0.3"
          />
          {/* <stop
            offset={getOffset(value + 0.1)}
            stopColor={color}
            stopOpacity="0.3"
          /> */}
        </linearGradient>
      </defs>
    </svg>
  );
}

export default CircleArrow;
