"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StepDot = void 0;
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _faCircle = require("@fortawesome/free-solid-svg-icons/faCircle");
var _faCircle2 = require("@fortawesome/free-regular-svg-icons/faCircle");
var _hooks = require("../hooks");
var _fontAwesomeIcon = require("../font-awesome-icon");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const StepDot = ({
  stepKey,
  activated,
  completed,
  onClick,
  isDisabled,
  ariaLabel
}) => {
  const attrs = (0, _hooks.useNonNativeButtonAttrs)({
    isDisabled,
    onKeyDown: onClick,
    onClick
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
    className: "fa-layers fa-2x dot-layer",
    ...attrs,
    "aria-label": ariaLabel,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
      icon: _faCircle.faCircle,
      className: "outside-circle",
      "test-id": `StepDot-${stepKey}`
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
      icon: _faCircle.faCircle,
      className: (0, _classnames.default)('inner-circle', {
        hidden: !completed && !activated
      }, {
        active: activated
      }, {
        completed
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
      icon: _faCircle2.faCircle,
      className: (0, _classnames.default)('ring', {
        active: activated
      }, {
        completed
      })
    })]
  });
};
exports.StepDot = StepDot;