import React, { ReactElement } from 'react';
import classnames from 'classnames';
import './Grid.scss';

interface Props {
  classes?: string[];
  columns?: number | 'flex';
  fullBleed?: boolean;
  headerElement?: ReactElement;
  header?: boolean;
  children?: Array<ReactElement>;
}

export const Grid: React.FC<Props> = ({
  classes = [''],
  columns,
  fullBleed = false,
  headerElement,
  header,
  children,
}) => (
  <div className={classnames('grid', ...classes)} data-columns={columns}>
    <div
      className={fullBleed ? 'grid-content' : 'grid-content ws-layout--float'}
    >
      {header && <div className="grid-header">{headerElement}</div>}
    </div>
    {children}
  </div>
);