import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const Root = styled.div`
  display: grid;
  grid-template-columns: repeat(1, 1fr); // We don't want grid on mobile
  grid-gap: ${props => (props.gap ? props.gap : 40)}px;

  @media (min-width: ${props => props.theme.breakpoints.large}px) {
    grid-template-columns: repeat(${props => (props.columns ? props.columns : 2)}, 1fr);
  }
`;

const Grid = ({ children, columns, gap }) => (
  <Root columns={columns} gap={gap}>
    {children}
  </Root>
);

Grid.propTypes = {
  children: PropTypes.any,
  columns: PropTypes.number,
  gap: PropTypes.number
};

export default Grid;