interface LoadingIconProps {
  width?: number;
  height?: number;
  color?: string;
  rx?: number;
  ry?: number;
  strokeWidth?: number;
  className?: string;
}

export function LoadingIcon({
  width = 64,
  height = 64,
  color = "#f21f7f",
  strokeWidth = 4,
  rx = 10,
  ry = 10,
  className,
}: LoadingIconProps) {
  // accurate calculations for smooth animation
  const totalLength =
    (width + height - 2 * rx - 2 * ry) * 2 + 3.14 * rx + 3.14 * ry;
  const lineLength = (totalLength * 1) / 3;
  const emptyLength = (totalLength * 2) / 3;
  return (
    <>
      <style>{`
        @keyframes svg-loading-animation {
          0% {
            stroke-dashoffset: 0;
          }
          100% {
            stroke-dashoffset: -${totalLength};
          }
        }
        `}</style>
      <svg
        viewBox={`0 0 ${width} ${height}`}
        width={width}
        height={height}
        className={className}
      >
        <title>Loading</title>
        <rect
          x={strokeWidth / 2}
          y={strokeWidth / 2}
          width={height - strokeWidth}
          height={width - strokeWidth}
          rx={rx}
          ry={ry}
          strokeDasharray={`${lineLength} ${emptyLength}`}
          strokeDashoffset={0}
          strokeLinecap="round"
          fill="none"
          strokeWidth={strokeWidth}
          style={{
            stroke: color,
            willChange: "stroke-dashoffset",
            animation: "svg-loading-animation 1s linear infinite",
          }}
        ></rect>
      </svg>
    </>
  );
}