import React from 'react';
import classNames from 'classnames';
import { EmbeddedStep } from './embedded-step';
import { jsx as _jsx } from "react/jsx-runtime";
/** Conveys progress through numbers of steps
 * [CAPITALIZATION] Use sentence case for each step
 * @deprecated The component is deprecated, use Stepper instead
 */
export const EmbeddedSteps = ({
  steps,
  currentStepKey,
  onClick = () => {},
  isDisabled,
  className
}) => {
  const currentStepIndex = steps.findIndex(step => step.stepKey === currentStepKey);
  const currentStep = steps.find(step => step.stepKey === currentStepKey);
  function isCompleted(step, index) {
    if (!currentStep) {
      return true;
    }
    return currentStep.markCompleted ? currentStep.markCompleted.includes(step.stepKey) : index < currentStepIndex;
  }
  return /*#__PURE__*/_jsx("div", {
    className: classNames('embedded-steps', {
      disabled: isDisabled
    }, className),
    "test-id": "embedded-steps",
    children: steps.map((step, index) => {
      return /*#__PURE__*/_jsx(EmbeddedStep, {
        name: step.stepName,
        stepKey: step.stepKey,
        active: index === currentStepIndex,
        completed: isCompleted(step, index),
        styling: step.stepStyle,
        onClick: () => !isDisabled && onClick(step.stepKey),
        isDisabled: isDisabled
      }, step.stepName);
    })
  });
};