import "./ChartGrid.scss";
import { ImageCard } from "../ImageCard/ImageCard";

/**
 * 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}`}>
    <div className={`chart-flex`}>
      {items.map((item, index) => (
        <figure className="chart-grid__item" key={index}>
          {item.title ? (
            <figcaption className="chart-grid__title">{item.title}</figcaption>
          ) : (
            <figcaption className="chart-grid__placeholder-title"></figcaption>
          )}
          <div className="chart-grid__image">
            <ImageCard image={item.image} />
          </div>

          {/* <img className="chart-grid__image" src={item.image} alt={item.title || ""} /> */}
        </figure>
      ))}
    </div>
  );
};