import { useStyleConfig, vui } from '../core'
import Divider, { DividerProps } from '../divider'
import { cs } from '../utils'
import { useHeaderContext } from './context'

/** Vertical line dividing part of the Header content. */
export const HeaderDivider = vui<'hr', DividerProps>((props, ref) => {
  const { className, ...rest } = props
  const styles = useStyleConfig('Header', useHeaderContext())

  return (
    <Divider
      borderColor="darkBlue.main"
      className={cs('vui-headerDivider', className)}
      h={40}
      isVertical
      ref={ref}
      {...styles.divider}
      {...rest}
    />
  )
})

HeaderDivider.displayName = 'HeaderDivider'
export default HeaderDivider
