import Box from '../box'
import { cdnUrl, vui } from '../core'
import type { SvgProps } from '../svg'
import Svg from '../svg'
import { cs } from '../utils'
import type { LogoProps } from './logo.types'

const veracityLogo = `${cdnUrl}/common/icons/logos/veracity-logo.svg`
const dnvLogo = `${cdnUrl}/common/icons/logos/dnv-logo.svg`
const veracityLogoWidth = 115
const dnvLogoWidth = 93.66

/** Brand logo. */
export const Logo = vui<'div', LogoProps>((props, ref) => {
  const { brand, children, className, src, styles, url, w, ...rest } = props

  let svgSrc = src
  let width = w

  if (!svgSrc) {
    svgSrc = brand === 'dnv' ? dnvLogo : veracityLogo
    width = brand === 'dnv' ? dnvLogoWidth : veracityLogoWidth
  }

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

  return (
    <Box
      centerV
      className={cs('vui-logo', className)}
      flexShrink={0}
      h={40}
      mr={2}
      ref={ref}
      w={width}
      {...styles?.container}
      {...linkProps}
      {...rest}
    >
      {children ?? <Svg aria-label="logo" h="100%" src={svgSrc} {...(styles?.svg as unknown as SvgProps)} />}
    </Box>
  )
})

Logo.displayName = 'Logo'

export default Logo
