import React from 'react'
import styled from 'styled-components'

import {
  Row,
  RowItem,
  LinkText,
  LabelTitle,
  LabelHeader,
} from '../UIComponents/FormItems'

const LinkOrcID = ({ orcid = '', id }) => (
  <Root>
    <Row noMargin>
      <RowItem>
        <LabelHeader>OrcID Account </LabelHeader>
      </RowItem>
    </Row>
    {!orcid ? (
      <Row noMargin>
        <RowItem>
          <Link href={`/api/users/orcid?userId=${id}`}>Link</Link>
        </RowItem>
      </Row>
    ) : (
      <Row noMargin>
        <RowItem>
          <LabelTitle>{orcid}</LabelTitle>
        </RowItem>
      </Row>
    )}
  </Root>
)

export default LinkOrcID

// #region styles
const Root = styled.div`
  display: flex;
  flex-direction: column;
  max-width: 30em;
`

const Link = LinkText.withComponent('a')
// #endregion