import React, {PureComponent} from 'react'
import {translate as T} from 'services'
import styled from 'styled-components'
import cssVars from 'cssVars'
const Container = styled.section`
  display: table;
  border-radius: ${cssVars['border-radius']};
  border: ${cssVars['border-width']} solid ${cssVars['border-color']};
  padding: ${cssVars['padding-level-3']};
  margin: 0 0 0 auto;
`
const TextRow = styled.p`
  margin: 0;
`
const UseCode = styled(TextRow)`
  color: ${cssVars['color-highlight']};
  &:hover {
    cursor: pointer;
  }
`

export class DistributorCode extends PureComponent {
  render () {
    return (
      <Container>
        <TextRow>{T('Use a distributor code')}</TextRow>
        <UseCode>{T('Use code')}</UseCode>
      </Container>
    )
  }
}
export default DistributorCode