import { Box } from '../box'
import { useUp, vui } from '../core'
import { Heading } from '../heading'
import { HeadingProps } from '../heading/heading.types'
import { cs } from '../utils'

/** Logo displayed in the left corner of the Header. */
export const HeaderApplicationName = vui<'div', HeadingProps & { url?: string }>((props, ref) => {
  const { color, title, url, ...rest } = props

  const isTablet = useUp('md')

  const additionalClassName = isTablet ? 'vui-headerApplicationNameTablet' : 'vui-headerApplicationNameMobile'

  const mobileProps = {
    fontSize: 18,
    lineHeight: '21px',
    mt: isTablet ? 0 : 'inherit',
    maxW: isTablet ? 'inherit' : '156px',
  }

  const linkProps = url ? { as: 'a', href: url, outline: 'none', focusRing: 2 } : {}

  const localColor = color || 'darkBlue.main'

  return (
    <Box {...linkProps}>
      <Heading
        className={cs('vui-headerApplicationName', additionalClassName)}
        size="title"
        {...rest}
        {...(mobileProps as any)}
        color={localColor}
      >
        {title}
      </Heading>
    </Box>
  )
})

HeaderApplicationName.displayName = 'HeaderApplicationName'

export default HeaderApplicationName
