import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
import { cs } from '../utils'
import { GridProps } from './grid.types'

export const GridBase = styled.divBox`
  display: grid;
`

/** Displays a basic grid wrapper. */
export const Grid = vui<'span', GridProps>((props, ref) => {
  const { className, ...rest } = omitThemingProps(props)
  const styles = useStyleConfig('Grid', props)

  return <GridBase className={cs('vui-grid', className)} ref={ref} {...styles} {...rest} />
})

Grid.displayName = 'Grid'
export default Grid
