import styles from "./styles.module.scss";

interface GridProps {
  layout: string;
  items: React.ReactNode[];
}

const Grid = ({ layout, items }: GridProps) => {
  const buildGrid = (
    layout: string,
    items: React.ReactNode[],
  ): React.ReactNode[][] => {
    const rows = layout.split("+").map((cols) => parseInt(cols));
    let currentItemIndex = 0;
    return rows.map((numOfColumns) => {
      const row = items.slice(
        currentItemIndex,
        currentItemIndex + numOfColumns,
      );
      currentItemIndex += numOfColumns;
      return row;
    });
  };

  const grid = buildGrid(layout, items);

  return (
    <div className={styles.grid}>
      {grid.map((cols, rowIndex) => (
        <div
          key={rowIndex}
          className={styles.gridRow}
          style={{
            gridTemplateColumns: `repeat(${cols.length}, minmax(0, 1fr))`,
          }}
        >
          {cols.map((content, colIndex) => (
            <div key={colIndex} className={styles.gridCol}>
              {content}
            </div>
          ))}
        </div>
      ))}
    </div>
  );
};

export default Grid;