import "./PeerList.scss";

/**
 * Grid of peer/benchmark cards ("peerList" element type), each with a logo,
 * optional flag, optional stat tiles and an optional highlighted quote.
 *
 * @param {Object} props
 * @param {Array<{flag: ?string, logo: string, stats: Array<{value: string, label: string}>, highlight: ?{headline: string, text: string}}>} props.peers - One entry per peer card.
 */
export const PeerList = ({ peers }) => {
  return (
    <div className="peerlist">
      {peers.map((peer, index) => (
        <div key={index} className="peer">
          {peer.stats && peer.stats.length !== 0 ? (
            <div className="peer--normal">
              <div className="peer__head">
                {peer.flag ? <img className="peer__head--flag" src={peer.flag} alt="" /> : null}
                <img className="peer__head--logo" src={peer.logo} alt="" />
              </div>
              <div className="peer__body">
                {peer.stats && peer.stats.length !== 0 ? (
                  <div className="peer__stats">
                    {peer.stats.map((stat, index) => (
                      <div
                        className={`peer__card--stats ${peer.stats.length === 1 ? "peer__card--width" : ""}`}
                        key={index}>
                        <div className={`card-stat--value `}>{stat.value}</div>
                        <div className="card--stat-lable">{stat.label}</div>
                      </div>
                    ))}
                  </div>
                ) : // <div className="card-highlight--headline">{peer.highlight.headline}</div>
                null}

                <div
                  className={` ${peer.stats && peer.stats.length !== 0 ? "peer__card--quote" : ""}`}>
                  {peer.highlight ? (
                    <div className={` ${index === 3 ? "peer__card--heigth" : ""}`}>
                      <div className="card-highlight--headline">{peer.highlight.headline}</div>
                      <div className="card--text">{peer.highlight.text}</div>
                    </div>
                  ) : null}
                </div>
              </div>
            </div>
          ) : (
            <div className="peer--justtext">
              <div className="peer__header">
                <div className="peer__head">
                  {peer.flag ? <img className="peer__head--flag" src={peer.flag} alt="" /> : null}
                  <img className="peer__head--logo" src={peer.logo} alt="" />
                </div>

                <div className="card-highlight--headline">{peer.highlight.headline}</div>
              </div>
              <div className="card--text">{peer.highlight.text}</div>
            </div>
          )}
        </div>
      ))}
    </div>
  );
};