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

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

const LinkOrcID = ({ orcid = '' }) => (
  <Root>
    <Row noMargin>
      <RowItem>
        <LabelHeader>OrcID Account </LabelHeader>
      </RowItem>
    </Row>
    {!orcid ? (
      <Row noMargin>
        <RowItem>
          <LinkText>Link</LinkText>
        </RowItem>
      </Row>
    ) : (
      <Row noMargin>
        <RowItem>
          <LabelTitle> {orcid} </LabelTitle>
          <LinkText>Unlink</LinkText>
        </RowItem>
      </Row>
    )}
  </Root>
)

export default LinkOrcID

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