content: import React from 'react'
  import PropTypes from 'prop-types'
  import classNames from 'classnames'
  
  import Button from './button'
  import Tag from './tag'
  import { OptionalLink } from './link'
  import { InlineCode } from './code'
  import { H1, Label, InlineList, Help } from './typography'
  import Icon from './icon'
  
  import classes from '../styles/title.module.sass'
  
  const MetaItem = ({ label, url, children, help }) => (
      <span>
          <Label className={classes.label}>{label}:</Label>
          <OptionalLink to={url}>{children}</OptionalLink>
          {help && (
              <>
                  {' '}
                  <Help>{help}</Help>
              </>
          )}
      </span>
  )
  
  export default function Title({
      id,
      title,
      tag,
      version,
      teaser,
      source,
      image,
      apiDetails,
      children,
      ...props
  }) {
      const hasApiDetails = Object.values(apiDetails || {}).some(v => v)
      const metaIconProps = { className: classes.metaIcon, width: 18 }
      return (
          <header className={classes.root}>
              {(image || source) && (
                  <div className={classes.corner}>
                      {source && (
                          <Button to={source} icon="code">
                              Source
                          </Button>
                      )}
  
                      {image && (
                          <div className={classes.image}>
                              <img src={image} width={100} height={100} alt="" />
                          </div>
                      )}
                  </div>
              )}
              <H1 className={classes.h1} id={id} {...props}>
                  {title}
              </H1>
              {(tag || version) && (
                  <div className={classes.tags}>
                      {tag && <Tag spaced>{tag}</Tag>}
                      {version && (
                          <Tag variant="new" spaced>
                              {version}
                          </Tag>
                      )}
                  </div>
              )}
  
              {hasApiDetails && (
                  <InlineList Component="div" className={classes.teaser}>
                      {apiDetails.stringName && (
                          <MetaItem
                              label="String name"
                              //help="String name of the component to use with nlp.add_pipe"
                          >
                              <InlineCode>{apiDetails.stringName}</InlineCode>
                          </MetaItem>
                      )}
                      {apiDetails.baseClass && (
                          <MetaItem label="Base class" url={apiDetails.baseClass.slug}>
                              <InlineCode>{apiDetails.baseClass.title}</InlineCode>
                          </MetaItem>
                      )}
                      {apiDetails.trainable != null && (
                          <MetaItem label="Trainable">
                              <span aria-label={apiDetails.trainable ? 'yes' : 'no'}>
                                  {apiDetails.trainable ? (
                                      <Icon name="yes" variant="success" {...metaIconProps} />
                                  ) : (
                                      <Icon name="no" {...metaIconProps} />
                                  )}
                              </span>
                          </MetaItem>
                      )}
                  </InlineList>
              )}
              {teaser && <div className={classNames('heading-teaser', classes.teaser)}>{teaser}</div>}
              {children}
          </header>
      )
  }
  
  Title.propTypes = {
      title: PropTypes.string,
      tag: PropTypes.string,
      teaser: PropTypes.node,
      source: PropTypes.string,
      image: PropTypes.string,
      children: PropTypes.node,
  }
  