import React from 'react';
import cx from 'classnames';
var circle = cx('d-inline-block', 'rounded-circle', 'w-10', 'circle', 'align-middle', 'text-center', 'mr-2', 'text-light');
var label = cx('text-center', 'align-middle', 'label');
export var Steps = function Steps(_ref) {
  var steps = _ref.steps,
      active = _ref.active,
      _ref$onStep = _ref.onStep,
      onStep = _ref$onStep === void 0 ? function () {
    return function () {};
  } : _ref$onStep;
  return React.createElement("ul", {
    className: "steps list-group list-group-horizontal list-group-flush justify-content-between mb-3"
  }, steps.map(function (step, i) {
    return React.createElement("li", {
      key: i,
      className: cx('list-group-item', 'border-0', {
        'step-active': i === active
      }, 'px-0', 'py-0')
    }, React.createElement("button", {
      onClick: onStep(i),
      className: "btn btn-link"
    }, React.createElement("span", {
      className: circle
    }, i + 1), React.createElement("span", {
      className: label
    }, step)));
  }));
};