import React from 'react';
import classNames from 'classnames';
import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { TruncateWithTooltip } from '../truncate-with-tooltip';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function StepperItem({
  icon,
  isCompleted,
  isRectHidden,
  label,
  helperText,
  isActive,
  onClick,
  stepKey,
  testId,
  isVisited,
  isDisabled,
  hasErrored
}) {
  return /*#__PURE__*/_jsxs("li", {
    className: "stepper-item",
    "test-id": `${testId}-${stepKey}`,
    children: [/*#__PURE__*/_jsxs("button", {
      className: "button",
      onClick: () => onClick(stepKey),
      disabled: isDisabled,
      "test-id": `${testId}-${stepKey}-item`,
      children: [/*#__PURE__*/_jsx("span", {
        className: classNames('stepper-item-icon', {
          active: isActive,
          completed: isCompleted,
          visited: isVisited,
          disabled: isDisabled,
          errored: hasErrored
        }),
        "test-id": `${testId}-${stepKey}-icon-btn`,
        children: hasErrored ? /*#__PURE__*/_jsx(FontAwesomeIcon, {
          icon: faXmark
        }) : /*#__PURE__*/_jsx(FontAwesomeIcon, {
          icon: isCompleted || isVisited ? faCheck : icon
        })
      }), /*#__PURE__*/_jsxs("span", {
        className: "stepper-item-text-wrapper",
        children: [/*#__PURE__*/_jsx("span", {
          className: "stepper-item-label",
          "test-id": `${testId}-${stepKey}-item-label`,
          children: label
        }), helperText && /*#__PURE__*/_jsx(TruncateWithTooltip, {
          className: classNames('stepper-item-helper-text', {
            errored: hasErrored
          }),
          children: /*#__PURE__*/_jsx("span", {
            "test-id": `${testId}-${stepKey}-helper-text`,
            children: helperText
          })
        })]
      })]
    }), !isRectHidden && /*#__PURE__*/_jsx("span", {
      className: "stepper-item-rect",
      "test-id": `${testId}-${stepKey}-rect`
    })]
  });
}