import * as React from "react";
import { Fig } from "../Fig/Fig";

export interface StatGridItem {
  value: React.ReactNode;
  unit?: string;
  caption: React.ReactNode;
}

export interface StatGridProps {
  items: StatGridItem[];
  columns?: number;
  className?: string;
}

export function StatGrid({ items, columns = 4, className }: StatGridProps) {
  const classes = ["ads-quad"];
  if (className) classes.push(className);
  return (
    <div className={classes.join(" ")} style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
      {items.map((item, i) => (
        <div key={i}>
          <Fig className="ads-quad__n" value={item.value} unit={item.unit} size={17} />
          <span className="ads-quad__l">{item.caption}</span>
        </div>
      ))}
    </div>
  );
}
