import React from "react";

import "./ButtonGrid.scss";

/**
 * Grid of logo tiles ("buttonGrid" element type), e.g. partner institutions.
 * Like ButtonList, clicking reports the target view id to the page instead of
 * navigating directly.
 *
 * @param {Object} props
 * @param {Array<{content: {logo: string}, targetViewId: string}>} props.items - One entry per tile.
 * @param {function(string): void} props.onNavigate - Called with the clicked tile's target view id.
 */
export const ButtonGrid = ({ items, onNavigate }) => {
  return (
    <div className="button-grid">
      {items.map((item, index) => (
        <button
          key={index}
          type="button"
          className={`button-grid__item`}
          onClick={() => item.targetViewId && onNavigate(item.targetViewId)}>
          {item.content.logo && <img src={item.content.logo} alt="" />}
        </button>
      ))}
    </div>
  );
};