import React from 'react';
import FaIcon from '../../atom/icon';
import { createGradientBackground } from '../../util/get-background-gradient-color';
import propTypes from './types';
import style from './style.css';
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.createElement("div", {
    className: style.iconPreviewWrapper,
    style: {
      background: createGradientBackground(icon.color, '93%', '100%')
    },
    "data-testid": "skill-icon"
  }, /*#__PURE__*/React.createElement("div", {
    className: style.iconPreview,
    style: mergedStyle
  }, /*#__PURE__*/React.createElement("div", {
    className: style.iconWrapper
  }, /*#__PURE__*/React.createElement(FaIcon, {
    iconName: icon.name,
    iconColor: icon.color,
    size: {
      faSize: 36,
      wrapperSize: 80
    },
    gradientBackground: true
  })), /*#__PURE__*/React.createElement("div", {
    className: style.titleWrapper,
    title: title
  }, title)));
};
IconPreview.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
export default IconPreview;
//# sourceMappingURL=index.js.map