import React from "react"
import PropTypes from 'prop-types'

const filterEmpty = obj => {
  const result = {}
  for (let key in obj) {
    if (obj[key] == null) continue

    result[key] = obj[key]
  }

  return result
}

function Grid({
  children,
  as: Component = "div",
  autoFlow,
  autoColumns,
  autoRows,
  areas,
  columns,
  rows,
  gap,
  rowGap,
  columnGap,
  justifyItems,
  justifyContent,
  alignItems,
  alignContent,
  ...props
}) {
  return (
    <Component
      style={filterEmpty({
        gridAutoFlow: autoFlow,
        gridAutoColumns: autoColumns,
        gridAutoRows: autoRows,
        grisTemplateAreas: areas,
        gridTemplateRows: rows,
        gridTemplateColumns: columns,
        gap,
        rowGap,
        columnGap,
        justifyContent,
        justifyItems,
        alignContent,
        alignItems,
        display: "grid",
      })}
      {...props}
    >
      {children}
    </Component>
  )
}

Grid.propTypes = {
  children: PropTypes.node.isRequired,
  as: PropTypes.string,
  autoFlow: PropTypes.string,
  autoColumns: PropTypes.string,
  autoRows: PropTypes.string,
  areas: PropTypes.string,
  columns: PropTypes.string,
  rows: PropTypes.string,
  gap: PropTypes.string,
  rowGap: PropTypes.string,
  columnGap: PropTypes.string,
  justifyItems: PropTypes.string,
  justifyContent: PropTypes.string,
  alignItems: PropTypes.string,
  alignContent: PropTypes.string,
}

export default Grid
