import React from 'react';
import classNames from 'classnames';
import styles from './GridLayout.module.css';

export default function GridLayout({ className, children }) {
  return <div className={classNames(styles.grid, className)}>{children}</div>;
}

export const GridRow = ({ className, children }) => {
  return <div className={classNames(styles.row, className, 'row')}>{children}</div>;
};

export const GridColumn = ({ xs, sm, md, lg, xl, className, children }) => {
  const classes = [];

  classes.push(xs ? `col-${xs}` : 'col-12');

  if (sm) {
    classes.push(`col-sm-${sm}`);
  }
  if (md) {
    classes.push(`col-md-${md}`);
  }
  if (lg) {
    classes.push(`col-lg-${lg}`);
  }
  if (xl) {
    classes.push(`col-lg-${xl}`);
  }
  return <div className={classNames(styles.col, classes, className)}>{children}</div>;
};