import Box from '../box'
import { useStyleConfig, vui } from '../core'
import Link from '../link'
import T from '../t'
import { cs } from '../utils'
import { useHeaderContext } from './context'
import { HeaderCreateAccountProps } from './header.types'

/** Text inviting to create an account when logged out. */
export const HeaderCreateAccount = vui<'div', HeaderCreateAccountProps>((props, ref) => {
  const { children, className, url, ...rest } = props
  const { isMobile, links } = useHeaderContext() ?? {}
  const styles = useStyleConfig('Header', useHeaderContext()).createAccount

  const screenProps = isMobile ? { borderBottom: '1px solid sandstone.main', p: 2 } : { ml: 3 }

  const linkVariant = isMobile ? 'dark' : (styles?.link?.variant ?? 'dark')

  return (
    <Box
      className={cs('vui-headerCreateAccount', className)}
      column
      flexShrink={0}
      ref={ref}
      {...styles.container}
      {...screenProps}
      {...rest}
    >
      {children ?? (
        <>
          <T size="sm" {...styles.text} color={isMobile ? 'darkBlue.main' : (styles?.text?.color ?? 'darkBlue.main')}>
            New to Veracity?
          </T>

          <Link fontWeight="medium" href={url ?? links.signUp} isUnderlined size="sm" variant={linkVariant}>
            Create account
          </Link>
        </>
      )}
    </Box>
  )
})

HeaderCreateAccount.displayName = 'HeaderCreateAccount'

export default HeaderCreateAccount
