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

/**
 * Single icon-plus-label pill ("badge" element type), also used standalone
 * inside {@link BadgeList}. `icon` (a `ui-marcom-icon` name) takes precedence
 * over `iconLink` (an arbitrary image URL) when both are given.
 *
 * @param {Object} props
 * @param {string} [props.iconLink] - Fallback icon image URL, used when `icon` is not set.
 * @param {string} [props.icon] - `ui-marcom-icon` name; takes precedence over `iconLink`.
 * @param {string} [props.text] - Label text.
 */
export const Badge = ({ iconLink, icon, text }) => {
  return (
    <div className="badge-frame">
      <div className="badge">
        {icon ? (
          <div className="badge__icon">
            <ui-marcom-icon className="icon" icon={icon}></ui-marcom-icon>
          </div>
        ) : iconLink ? (
          <div className="badge__icon">
            <img src={iconLink} alt="" />
          </div>
        ) : null}

        <div className="badge__text">
          <div className="badge__text--text">{text}</div>
        </div>
      </div>
    </div>
  );
};