"use strict";

import { StyleSheet, View } from "react-native";
import { IOColors, IOVisualCostants } from "../../core";
import { Icon } from "./Icon";
import { jsx as _jsx } from "react/jsx-runtime";
const tonalColorMap = {
  neutral: {
    background: "blueIO-50",
    foreground: "grey-450"
  }
};
const variantMap = {
  tonal: tonalColorMap
};
const IconContainedDefaultSize = IOVisualCostants.iconContainedSizeDefault;
const styles = 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.
*/
export const IconContained = ({
  variant,
  color,
  icon
}) => {
  const backgroundColor = variantMap[variant][color].background;
  const foregroundColor = variantMap[variant][color].foreground;
  return /*#__PURE__*/_jsx(View, {
    style: [styles.iconContainedWrapper, {
      backgroundColor: IOColors[backgroundColor]
    }],
    children: /*#__PURE__*/_jsx(Icon, {
      name: icon,
      color: foregroundColor
    })
  });
};
//# sourceMappingURL=IconContained.js.map