import React from 'react';
import classNames from 'classnames';
import { jsx as _jsx } from "react/jsx-runtime";
/** Progress indicator. By default, it uses blue progress indicator
 * [CAPITALIZATION] Use sentence case
 * [CAPITALIZATION] Step x/x: sentence case
 * @midnight-gray-supported
 * @alpine-light-supported
 */
export const ProgressBar = ({
  max = 1,
  success = false,
  warning = false,
  error = false,
  value,
  className,
  ariaLabel,
  ariaLabelledBy,
  testId = 'progress-bar'
}) => {
  const adoptedValue = value <= max ? value : max;
  const ratio = Math.min(adoptedValue, max) * 100 / max;
  return /*#__PURE__*/_jsx("div", {
    className: classNames('progress', className),
    children: /*#__PURE__*/_jsx("div", {
      className: classNames('progress-bar', {
        success,
        warning,
        error
      }),
      "test-id": testId
      /* eslint-disable-next-line react/forbid-dom-props */,
      style: {
        width: `${ratio}%`
      },
      role: "progressbar",
      "aria-valuenow": adoptedValue,
      "aria-valuemin": 0,
      "aria-valuemax": max,
      "aria-label": ariaLabel,
      "aria-labelledby": ariaLabelledBy
    })
  });
};