import "./ChartGrid.scss";

/**
 * One or two chart/diagram images side by side, each with an optional
 * caption above it ("chartGrid" element type). Portrait: stacks to 1 column.
 *
 * @param {Object} props
 * @param {Array<{title: string|null, image: string}>} props.items - 1-2 chart entries.
 */
export const ChartGrid = ({ items }) => {
  return (
    <div className={`chart-grid chart-grid--count-${items.length}`}>
      {items.map((item, index) => (
        <figure className="chart-grid__item" key={index}>
          {item.title && <figcaption className="chart-grid__title">{item.title}</figcaption>}
          <img className="chart-grid__image" src={item.image} alt={item.title || ""} />
        </figure>
      ))}
    </div>
  );
};