const MaskedIcon = ({ path, height, color, bgStyle }) => {
  const style = bgStyle || (color && color.startsWith("rgba")
    ? { backgroundColor: color }
    : {});

  return (
    <div
      className={color && !color.startsWith("rgba") ? color : ""}
      style={{
        WebkitMask: `url(${path}) no-repeat center / contain`,
        width: `auto`,
        height: height,
        ...style,
      }}
    >
      <img className="w-full h-full opacity-0" src={path}></img>
    </div>
  );
};

export default MaskedIcon;