import * as React from 'react'
import styled from 'styled-components'
import pkg from '../../package.json'

const Base = styled('div')({
  position: 'relative',
})

// @ts-ignore
const Title = styled('strong')({
  fontSize: '2rem',
  fontFamily: 'var(--font-family-headings), sans-serif',
  fontWeight: 500,
  lineHeight: 'var(--line-height-headings, 1.5)',
  fontStretch: 'var(--font-stretch-headings, normal)',
  textTransform: 'lowercase',
  whiteSpace: 'nowrap',
})

const Org = styled('small')({
  position: 'absolute',
  top: '-0.375em',
  right: 0,
  fontWeight: 600,
  textTransform: 'lowercase',
})

const Subtitle = styled('small')({
  position: 'absolute',
  bottom: '-1em',
  right: 0,
  fontWeight: 600,
})

const Brand = () => {
  const org = pkg['org'] || (pkg.name.includes('@') ? pkg.name.split('/')[0].slice(1) : null)
  const name = pkg['title'] || (pkg.name.includes('@') ? pkg.name.split('/')[1] : pkg.name)
  return (
    <Base>
      {org && (
        <React.Fragment>
          <Org>
            {org}
          </Org>
          {' '}
        </React.Fragment>
      )}
      <Title>
        {name}
      </Title>
      {' '}
      <Subtitle>
        v.{pkg.version}
      </Subtitle>
    </Base>
  )
}

export default Brand