import { useStyleConfig, vui } from '../core'
import { Logo } from '../logo'
import { LogoProps } from '../logo/logo.types'
import { useHeaderContext } from './context'

/** Logo displayed in the left corner of the Header. */
export const HeaderLogo = vui<'div', LogoProps>((props, ref) => {
  const { brand, children, className, src, url, ...rest } = props
  const { links } = useHeaderContext() ?? {}

  const styles = useStyleConfig('Header', useHeaderContext()).logo

  const logoUrl = url ?? links.home

  return (
    <Logo brand={brand} className={className} ref={ref} src={src} styles={styles} url={logoUrl} {...rest}>
      {children}
    </Logo>
  )
})

HeaderLogo.displayName = 'HeaderLogo'

export default HeaderLogo
