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: 'var(--font-weight-headings, 400)',
  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.25em',
  right: 0,
  fontWeight: 'bolder',
})

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

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

export default Brand