import { Badge } from "../Badge/Badge";
import "./BadgeList.scss";

/**
 * Row of {@link Badge}s. Not a registry element itself - rendered internally
 * by {@link AiObs}.
 *
 * @param {Object} props
 * @param {Array<{iconLink: string, text: string}>} props.badges - One entry per badge.
 */
export const BadgeList = ({ badges, format }) => {
  //   console.log(badges);
  return (
    <div className={`badge-list badge-list--${format}`}>
      {badges.map((badge, index) => (
        <Badge key={index} iconLink={badge.iconLink} text={badge.text} />
      ))}
    </div>
  );
};