import "./IconBulletPoints.scss";
import "@ui-marcom/icon";

/**
 * Vertical list of icon-plus-text bullet points ("iconBulletPoints" element type).
 *
 * @param {Object} props
 * @param {Array<{icon: string, text: string}>} props.points - One entry per bullet point.
 */
export const IconBulletPoints = ({ points }) => {
  return (
    <div className="bulletpoints">
      {points.map((point, index) => (
        <div key={index} className="point">
          <div className="point__icon">
            <ui-marcom-icon className="icon" icon={point.icon}></ui-marcom-icon>
          </div>
          <div className="point__textbox">
            <div className="point__text">{point.text}</div>
          </div>
        </div>
      ))}
    </div>
  );
};