"use strict";

exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _icon = _interopRequireDefault(require("../../atom/icon"));
var _getBackgroundGradientColor = require("../../util/get-background-gradient-color");
var _types = _interopRequireDefault(require("./types"));
var _style = _interopRequireDefault(require("./style.css"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const DEFAULT_GAP = '32px';
const IconPreview = props => {
  const {
    icon,
    title,
    customStyle = {}
  } = props;

  // explicit disable to override only if customStyle is provided otherwise merged in style.
  // eslint-disable-next-line @coorpacademy/coorpacademy/no-overwriting-spread
  const mergedStyle = {
    gap: DEFAULT_GAP,
    padding: '72px 48px 64px 48px',
    ...customStyle
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.iconPreviewWrapper,
    style: {
      background: (0, _getBackgroundGradientColor.createGradientBackground)(icon.color, '93%', '100%')
    },
    "data-testid": "skill-icon"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.iconPreview,
    style: mergedStyle
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.iconWrapper
  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
    iconName: icon.name,
    iconColor: icon.color,
    size: {
      faSize: 36,
      wrapperSize: 80
    },
    gradientBackground: true
  })), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.titleWrapper,
    title: title
  }, title)));
};
IconPreview.propTypes = process.env.NODE_ENV !== "production" ? _types.default : {};
var _default = exports.default = IconPreview;
//# sourceMappingURL=index.js.map