"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.GranularProgressBar = void 0;
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const DEFAULT_LEVELS_COUNT = 4;
/**
 * @midnight-gray-supported
 * @alpine-light-supported
 */
const GranularProgressBar = ({
  levelsCount = DEFAULT_LEVELS_COUNT,
  activeLevelsCount = 0,
  className,
  testId = 'granular-progress-bar-test-id',
  isVertical = false
}) => {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: (0, _classnames.default)('granular-progress-bar', isVertical ? 'vertical-layout' : 'horizontal-layout', className),
    "test-id": testId,
    children: Array.from({
      length: levelsCount
    }).map((item, index) => {
      const isActive = index < activeLevelsCount;
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        className: (0, _classnames.default)(isVertical ? 'vertical-bar' : 'horizontal-bar', isActive && 'active-bar'),
        "test-id": "granular-progress-bar"
      }, index);
    })
  });
};
exports.GranularProgressBar = GranularProgressBar;