export const Grid = ({children, style, ...other}) => {
  const gridContainerStyle = {
    display: 'grid',
    margin: '8px',
    justifyItems: 'stretch',
    alignItems: 'stretch',
    ...style,
  }

  return <div style={gridContainerStyle} {...other}>
    {children}
  </div>
}

export const GridItem = ({children, row, col, rowSpan, colSpan, style, ...other}) => {
  const localRow = +row
  const localCol = +col
  const localColSpan = colSpan ? colSpan - 1 : 0
  const localRowSpan = rowSpan ? rowSpan - 1 : 0
  const gridItemStyle = {
    gridColumnStart: localCol,
    gridColumnEnd: localCol + localColSpan,
    gridRowStart: localRow,
    gridRowEnd: localRow + localRowSpan,
    padding: '4px',
    ...style,
  }

  return <div style={gridItemStyle} {...other}>
    {children}
  </div>
}

export const Flex = ({children, style, ...other}) => 
  <div
  style={{display:'flex', ...style}}
  {...other}>
    {children}
  </div>