import React from "react";
import PropTypes from "prop-types";
import styles from "./modules/Layout.module.css";

export default function Layout(props) {
  const childrenArray = React.Children.toArray(props.children);
  let gridItems = [];
  let otherChild = [];
  for (let i in childrenArray) {
    if (i <= 1) {
      gridItems.push(childrenArray[i]);
    } else {
      otherChild.push(childrenArray[i]);
    }
  }
  return (
    <div className={styles.grid}>
      <div className={styles.gridItem}>{gridItems[0]}</div>
      <div className={`${styles.gridItem} ${styles.darkbg}`}>
        {gridItems[1]}
      </div>
      {otherChild}
    </div>
  );
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
};