import Box from '../box'
import { useStyleConfig, vui } from '../core'
import { cs } from '../utils'
import { useFooterContext } from './context'
import { FooterColumnProps } from './footer.types'
import FooterSection from './footerSection'

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

  return (
    <Box
      className={cs('vui-footerColumn', className)}
      column
      flex={flex ?? { xs: '0 0 50%', sm: '0 0 50%', md: '0 0 25%' }}
      minW={164}
      p={{ xs: 1, sm: 1, md: 1.25, lg: 1.5 }}
      ref={ref}
      spaceY={4}
      {...styles.column}
      {...rest}
    >
      {children ?? sections?.map((section, index) => <FooterSection key={index} {...section} />)}
    </Box>
  )
})

FooterColumn.displayName = 'FooterColumn'
export default FooterColumn
