import Box from '../box'
import { useStyleConfig, vui } from '../core'
import { cs } from '../utils'
import { useHeaderContext } from './context'
import { HeaderContentProps } from './header.types'

/** Controls max-width of the content and centers itself horizontally. */
export const HeaderContent = vui<'div', HeaderContentProps>((props, ref) => {
  const { className, ...rest } = props
  const styles = useStyleConfig('Header', useHeaderContext())

  return (
    <Box
      centerV
      className={cs('vui-headerContent', className)}
      h={1}
      mx="auto"
      position="relative"
      ref={ref}
      w={1}
      {...styles.content}
      {...rest}
    />
  )
})

HeaderContent.displayName = 'HeaderContent'

export default HeaderContent
