import React from 'react'

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

/** Organizes sections with links into a single column. Different width per breakpoint. */
const FooterSlimColumn = vui<'div', BoxProps>((props, ref) => {
  const { children, ...rest } = props
  const styles = useStyleConfig('Footer', useFooterContext())

  return (
    <Box
      className={cs('vui-footerSlimColumn')}
      column
      flex={{ xs: '0 0 50%', sm: '0 0 20%', md: '0 0 20%' }}
      minW={164}
      p={{ xs: 1, sm: 1, md: 1.25, lg: 1.5 }}
      ref={ref}
      spaceY={4}
      {...styles.column}
      {...rest}
    >
      {children}
    </Box>
  )
})

FooterSlimColumn.displayName = 'FooterSlimColumn'

export default FooterSlimColumn
