import React from 'react'

import Box, { BoxProps } from '../box'
import { useStyleConfig, vui } from '../core'
import { cs } from '../utils'
import { useFooterContext } from './context'

/** Organizes Footer content into a row of multuple columns. */
const FooterRow = vui<'div', BoxProps>((props, ref) => {
  const { className, ...rest } = props
  const styles = useStyleConfig('Footer', useFooterContext())

  return <Box className={cs('vui-footerRow', className)} m={-1.5} ref={ref} wrap {...styles.row} {...rest} />
})

FooterRow.displayName = 'FooterRow'
export default FooterRow
