import React from 'react';
import classNames from 'classnames';
import { faCircle as faSolidCircle } from '@fortawesome/free-solid-svg-icons/faCircle';
import { faCircle as faRegularCircle } from '@fortawesome/free-regular-svg-icons/faCircle';
import { useNonNativeButtonAttrs } from '../hooks';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const StepDot = ({
  stepKey,
  activated,
  completed,
  onClick,
  isDisabled,
  ariaLabel
}) => {
  const attrs = useNonNativeButtonAttrs({
    isDisabled,
    onKeyDown: onClick,
    onClick
  });
  return /*#__PURE__*/_jsxs("span", {
    className: "fa-layers fa-2x dot-layer",
    ...attrs,
    "aria-label": ariaLabel,
    children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
      icon: faSolidCircle,
      className: "outside-circle",
      "test-id": `StepDot-${stepKey}`
    }), /*#__PURE__*/_jsx(FontAwesomeIcon, {
      icon: faSolidCircle,
      className: classNames('inner-circle', {
        hidden: !completed && !activated
      }, {
        active: activated
      }, {
        completed
      })
    }), /*#__PURE__*/_jsx(FontAwesomeIcon, {
      icon: faRegularCircle,
      className: classNames('ring', {
        active: activated
      }, {
        completed
      })
    })]
  });
};