import React from 'react';
import classNames from 'classnames';
import { Button } from '@pisell/materials';
var OAuthButtonGroup = function OAuthButtonGroup(_ref) {
  var providers = _ref.providers,
    _ref$layout = _ref.layout,
    layout = _ref$layout === void 0 ? 'vertical' : _ref$layout,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'large' : _ref$size,
    _ref$block = _ref.block,
    block = _ref$block === void 0 ? true : _ref$block,
    wrapperClassName = _ref.wrapperClassName,
    buttonClassName = _ref.buttonClassName,
    _ref$gap = _ref.gap,
    gap = _ref$gap === void 0 ? 12 : _ref$gap;
  if (!providers.length) {
    return null;
  }
  var isVertical = layout === 'vertical';
  return /*#__PURE__*/React.createElement("div", {
    className: classNames('oauth-button-group', wrapperClassName, {
      'oauth-button-group-vertical': isVertical,
      'oauth-button-group-horizontal': !isVertical
    }),
    style: isVertical ? {
      display: 'grid',
      rowGap: gap
    } : {
      display: 'flex',
      columnGap: gap,
      flexWrap: 'wrap'
    }
  }, providers.map(function (_ref2) {
    var key = _ref2.key,
      label = _ref2.label,
      icon = _ref2.icon,
      onClick = _ref2.onClick,
      disabled = _ref2.disabled,
      className = _ref2.className,
      badge = _ref2.badge,
      badgeClassName = _ref2.badgeClassName;
    return /*#__PURE__*/React.createElement(Button, {
      key: key,
      size: size,
      block: block,
      disabled: disabled,
      className: classNames(buttonClassName, className),
      icon: icon,
      onClick: onClick
    }, badge && /*#__PURE__*/React.createElement("span", {
      className: classNames('oauth-button-badge', badgeClassName)
    }, badge), label);
  }));
};
export default OAuthButtonGroup;