export const Grid = ({children, ...other}) => {
  const gridContainerStyle = {
    display: 'grid',
    columnGap: '4px',
    rowGap: '4px',
    ...other,
  }

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

export const GridItem = ({children, row, col, rowSpan, colSpan, ...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,
    ...other,
  }

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