import Box from '../box'
import { useStyleConfig, vui } from '../core'
import Link from '../link'
import T from '../t'
import { cs } from '../utils'
import { useFooterContext } from './context'
import { FooterTrademarkProps } from './footer.types'
import FooterColumn from './footerColumn'
import FooterHeading from './footerHeading'

export const defaultLinkedInUrl = 'https://www.linkedin.com/showcase/veracity-data-platform'

/** Section includes a heading and a set of links. */
export const FooterTrademark = vui<'div', FooterTrademarkProps>((props, ref) => {
  const { className, linkedIn, ...rest } = props
  const styles = useStyleConfig('Footer', useFooterContext())

  return (
    <Box className={cs('vui-footerTrademark', className)} ref={ref} w="100%" wrap {...styles.trademark} {...rest}>
      <FooterColumn centerV flex={{ xs: '0 0 100%', md: '0 0 25%' }}>
        <Link
          fontWeight="demi"
          href={linkedIn ?? defaultLinkedInUrl}
          iconLeft={<Link.Icon mr={1} name="cubCircleLinkedIn" radius="50%" size="sm" />}
          isExternal
          {...styles.link}
        >
          <FooterHeading mb={0} text="Follow us" />
        </Link>
      </FooterColumn>

      <FooterColumn centerV flex={{ xs: '0 0 100%', md: '0 0 75%' }}>
        <T size="xs">
          <T size="xs" weight="demi">
            Veracity by DNV
          </T>
          , DNV AS, NO-1322 Høvik, Norway
        </T>
      </FooterColumn>
    </Box>
  )
})

FooterTrademark.displayName = 'FooterTrademark'
export default FooterTrademark
