import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children", "className", "color", "tint", "opacity"];
import React, { forwardRef } from 'react';
import Box from '../box';
import cx from 'classnames';
import theme from './theme.css';
var Icon = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var children = _ref.children,
      className = _ref.className,
      _ref$color = _ref.color,
      color = _ref$color === void 0 ? 'teal' : _ref$color,
      _ref$tint = _ref.tint,
      tint = _ref$tint === void 0 ? 'normal' : _ref$tint,
      _ref$opacity = _ref.opacity,
      opacity = _ref$opacity === void 0 ? 0.84 : _ref$opacity,
      others = _objectWithoutProperties(_ref, _excluded);

  var classNames = cx(theme[color], theme[tint], className);
  return /*#__PURE__*/React.createElement(Box, _extends({
    className: classNames,
    alignItems: "center",
    "data-teamleader-ui": "icon",
    display: "flex",
    element: "span",
    ref: ref
  }, others), React.Children.map(children, function (child) {
    // Check if child is an actual React component
    // if so, pass the needed props. If not, just render it.
    if (! /*#__PURE__*/React.isValidElement(child)) {
      return child;
    }

    return /*#__PURE__*/React.cloneElement(child, {
      opacity: opacity
    });
  }));
});
Icon.displayName = 'Icon';
export default Icon;