"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.IconContained = void 0;
var _reactNative = require("react-native");
var _core = require("../../core");
var _Icon = require("./Icon");
var _jsxRuntime = require("react/jsx-runtime");
const tonalColorMap = {
  neutral: {
    background: "blueIO-50",
    foreground: "grey-450"
  }
};
const variantMap = {
  tonal: tonalColorMap
};
const IconContainedDefaultSize = _core.IOVisualCostants.iconContainedSizeDefault;
const styles = _reactNative.StyleSheet.create({
  iconContainedWrapper: {
    overflow: "hidden",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    width: IconContainedDefaultSize,
    height: IconContainedDefaultSize,
    borderRadius: IconContainedDefaultSize / 2
  }
});

/*
`IconContained` is just a special wrapper for the `Icon` component. 
It's also not an interactive component, unlike the `IconButton`.
When adding new styles, you should be aware of this context and be careful
not to add variants that look like interactive counterparts.
*/
const IconContained = ({
  variant,
  color,
  icon
}) => {
  const backgroundColor = variantMap[variant][color].background;
  const foregroundColor = variantMap[variant][color].foreground;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    style: [styles.iconContainedWrapper, {
      backgroundColor: _core.IOColors[backgroundColor]
    }],
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
      name: icon,
      color: foregroundColor
    })
  });
};
exports.IconContained = IconContained;
//# sourceMappingURL=IconContained.js.map