import React from 'react';
import { IconGiftMediumOutline } from '@teamleader/ui-icons';
import { IconButton } from '../..';
export default {
  component: IconButton,
  title: 'IconButton'
};

var Wrapper = function Wrapper(_ref) {
  var children = _ref.children,
      _ref$inverse = _ref.inverse,
      inverse = _ref$inverse === void 0 ? false : _ref$inverse;
  return /*#__PURE__*/React.createElement("div", {
    style: {
      minHeight: '50px',
      display: 'flex',
      backgroundColor: inverse ? 'grey' : 'transparent'
    }
  }, children);
};

var sizes = ['small', 'medium', 'large'];
var colors = ['neutral', 'white', 'mint', 'violet', 'ruby', 'gold', 'aqua', 'teal'];
var tints = ['lightest', 'light', 'normal', 'dark', 'darkest'];
export var Main = function Main() {
  return /*#__PURE__*/React.createElement("div", null, sizes.map(function (size) {
    return colors.map(function (color) {
      return /*#__PURE__*/React.createElement(Wrapper, {
        key: color,
        inverse: color === 'white'
      }, tints.map(function (tint) {
        return /*#__PURE__*/React.createElement(React.Fragment, {
          key: tint
        }, /*#__PURE__*/React.createElement(IconButton, {
          size: size,
          color: color,
          tint: tint,
          icon: /*#__PURE__*/React.createElement(IconGiftMediumOutline, null),
          marginRight: 2
        }), /*#__PURE__*/React.createElement(IconButton, {
          size: size,
          color: color,
          tint: tint,
          icon: /*#__PURE__*/React.createElement(IconGiftMediumOutline, null),
          marginRight: 2,
          disabled: true
        }), /*#__PURE__*/React.createElement(IconButton, {
          size: size,
          color: color,
          tint: tint,
          icon: /*#__PURE__*/React.createElement(IconGiftMediumOutline, null),
          marginRight: 2,
          selected: true
        }));
      }));
    });
  }));
};