import "./CardGrid.scss";

/**
 * Stat tiles plus an optional highlight card ("cardGrid" element type), e.g.
 * "20% perceived time savings" alongside a customer statement.
 *
 * @param {Object} props
 * @param {Array<{value: string, label: string}>} props.stats - Stat tiles (value + caption).
 * @param {{headline: string, text: string}|null} props.highlight - Optional emphasized card.
 */
export const CardGrid = ({ stats, highlight }) => {
  return (
    <div className="card-grid">
      <div className="card-grid__stats" style={{ "--count": stats.length }}>
        {stats.map((stat, index) => (
          <div className={`card-grid__card card-grid__stat`} key={index}>
            <div className="card-grid__stat-value">{stat.value}</div>
            <div className="card-grid__stat-label">{stat.label}</div>
          </div>
        ))}
      </div>
      {highlight && (
        <div className="card-grid__card card-grid__highlight">
          <div className="card-grid__highlight-headline">{highlight.headline}</div>
          <div className="card-grid__highlight-text">{highlight.text}</div>
        </div>
      )}
    </div>
  );
};