import React from 'react';
import classnames from 'classnames';
import { jsx as _jsx } from "react/jsx-runtime";
const DEFAULT_LEVELS_COUNT = 4;
/**
 * @midnight-gray-supported
 * @alpine-light-supported
 */
export const GranularProgressBar = ({
  levelsCount = DEFAULT_LEVELS_COUNT,
  activeLevelsCount = 0,
  className,
  testId = 'granular-progress-bar-test-id',
  isVertical = false
}) => {
  return /*#__PURE__*/_jsx("div", {
    className: classnames('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__*/_jsx("span", {
        className: classnames(isVertical ? 'vertical-bar' : 'horizontal-bar', isActive && 'active-bar'),
        "test-id": "granular-progress-bar"
      }, index);
    })
  });
};