import React from 'react';
import classNames from 'classnames';
import { StepDot } from './step-dot';
import { StepStyles } from './types';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const EmbeddedStep = ({
  name,
  stepKey,
  active,
  completed,
  isDisabled,
  styling = StepStyles.RECTANGLE,
  onClick = () => {}
}) => /*#__PURE__*/_jsxs("div", {
  className: "embedded-step-marker",
  children: [/*#__PURE__*/_jsx(StepDot, {
    activated: active,
    completed: completed,
    onClick: onClick,
    stepKey: stepKey,
    isDisabled: isDisabled,
    ariaLabel: name
  }), /*#__PURE__*/_jsx("span", {
    className: classNames('dot-text', {
      active
    }, {
      completed
    }),
    "test-id": "dot-text",
    children: name
  }), /*#__PURE__*/_jsx("div", {
    className: styling
  })]
});