import Box from '../box'
import { useStyleConfig, v, vui } from '../core'
import { cs, isJsx } from '../utils'
import { useFooterContext } from './context'
import { FooterSectionProps } from './footer.types'
import FooterHeading from './footerHeading'
import FooterLink from './footerLink'

/** Section includes a heading and a set of links. */
export const FooterSection = vui<'div', FooterSectionProps>((props, ref) => {
  const { children, className, heading, links, ...rest } = props
  const styles = useStyleConfig('Footer', useFooterContext())

  return (
    <Box className={cs('vui-footerSection', className)} column ref={ref} {...styles.section} {...rest}>
      {isJsx(heading) ? heading : <FooterHeading text={heading} />}

      {children ??
        (isJsx(links) ? (
          links
        ) : (
          <v.ul>
            {links?.map(({ text, url }, index) => (
              <v.li key={index}>
                <FooterLink href={url} text={text} />
              </v.li>
            ))}
          </v.ul>
        ))}
    </Box>
  )
})

FooterSection.displayName = 'FooterSection'
export default FooterSection
