import "./IconBubbles.scss";

/**
 * Decorative pair of icon bubbles (one big, one small) orbiting a
 * {@link Circle} in the CircleInfographic.
 *
 * @param {Object} props
 * @param {function(Event): void} props.action - Called on click of either bubble; forwarded to the parent Circle as its select/close handler.
 * @param {number} props.num - Index among the Circle's icon bubbles, used for per-bubble positioning (`num--{n}` class).
 * @param {string} props.big - Icon URL for the big bubble.
 * @param {string} props.small - Icon URL for the small bubble.
 */
export const IconBubbles = ({ action, num, big, small }) => {
  const blur = (e) => {
    action(e);
  };
  return (
    <div className={`iconbubblewrapper ` + `num--` + num}>
      <div className="bubbleicon--big" onClick={blur}>
        <img src={big} alt="" />
      </div>
      <div className="bubbleicon--small" onClick={blur}>
        <img src={small} alt="" />
      </div>
    </div>
  );
};