import React, { memo } from 'react';
import "./style.css";

var CountDownSets = function CountDownSets(_ref) {
  var countProgress = _ref.countProgress;
  var rCircle = 377;
  var circleProgress = rCircle - (countProgress === null || countProgress === void 0 ? void 0 : countProgress.sets) * rCircle / (countProgress === null || countProgress === void 0 ? void 0 : countProgress.totalSets);
  return /*#__PURE__*/React.createElement("div", {
    className: "countdown-sets"
  }, /*#__PURE__*/React.createElement("div", {
    className: "box-circle"
  }, /*#__PURE__*/React.createElement("svg", null, /*#__PURE__*/React.createElement("circle", {
    cx: "70",
    cy: "70",
    r: "70"
  }), /*#__PURE__*/React.createElement("circle", {
    style: {
      strokeDashoffset: "" + circleProgress
    },
    id: "circle-progress",
    cx: "70",
    cy: "70",
    r: "70"
  }))), /*#__PURE__*/React.createElement("div", {
    className: "number"
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, countProgress === null || countProgress === void 0 ? void 0 : countProgress.sets), /*#__PURE__*/React.createElement("div", null, "of ", countProgress === null || countProgress === void 0 ? void 0 : countProgress.totalSets))));
};

export default memo(CountDownSets);