import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React from 'react';
import cx from 'classnames';
import theme from './theme.css';
import Box from '../box';
import { TextSmall } from '../typography';

var ProgressStep = function ProgressStep(_ref) {
  var _cx;

  var label = _ref.label,
      meta = _ref.meta,
      _ref$active = _ref.active,
      active = _ref$active === void 0 ? false : _ref$active,
      _ref$completed = _ref.completed,
      completed = _ref$completed === void 0 ? false : _ref$completed,
      onClick = _ref.onClick;
  var classNames = cx(theme['step'], (_cx = {}, _defineProperty(_cx, theme['is-active'], active), _defineProperty(_cx, theme['is-completed'], completed), _defineProperty(_cx, theme['is-clickable'], !!onClick), _defineProperty(_cx, theme['has-meta'], !!meta), _cx));
  return /*#__PURE__*/React.createElement(Box, {
    className: classNames
  }, /*#__PURE__*/React.createElement("div", {
    className: theme['step-label-holder']
  }, /*#__PURE__*/React.createElement(TextSmall, {
    className: theme['step-label']
  }, label), meta && /*#__PURE__*/React.createElement(TextSmall, {
    className: theme['step-meta']
  }, meta)), /*#__PURE__*/React.createElement("span", {
    className: theme['status-bullet-halo'],
    onClick: onClick
  }), /*#__PURE__*/React.createElement("span", {
    className: theme['status-bullet'],
    onClick: onClick
  }));
};

ProgressStep.displayName = 'ProgressTracker.ProgressStep';
export default ProgressStep;