import cs from 'classnames';
import React__default, { useRef, useLayoutEffect } from 'react';

const CircleProgressStyle = "E_4100_0_7_c1bus5hc";
const CircleProgress = props => {
  const {
    percent,
    color = "#0080ff",
    className,
    "data-testid": dataTestId
  } = props;
  const wrapperRef = useRef(null);
  const childRef = useRef(null);
  useLayoutEffect(() => {
    var _a;
    (_a = wrapperRef.current) == null ? void 0 : _a.style.setProperty("--color", color);
  }, [color]);
  useLayoutEffect(() => {
    let deg = 0;
    const childStyle = childRef.current.style;
    if (percent <= 0.5) {
      deg = 180 * (percent / 0.5);
      childStyle.background = "white";
    } else {
      deg = 180 * ((percent - 0.5) / 0.5);
      childStyle.background = color;
    }
    childStyle.transform = `rotate(${deg}deg)`;
  }, [percent, color]);
  return /* @__PURE__ */React__default.createElement("div", {
    "data-testid": dataTestId,
    className: cs(CircleProgressStyle, className),
    ref: wrapperRef
  }, /* @__PURE__ */React__default.createElement("div", {
    className: "circle-inner"
  }, /* @__PURE__ */React__default.createElement("div", {
    className: "circle-content"
  }), /* @__PURE__ */React__default.createElement("div", {
    className: "circle-child",
    ref: childRef
  })));
};

export { CircleProgress };
