import React, { FunctionComponent } from 'react'
import { Text } from '@rebass/emotion'

import theme from 'utils/theme'

import * as Styles from './bordered-text-styles'

import { BorderedTextProps } from './bordered-text-types'

const BorderedText: FunctionComponent<BorderedTextProps> = (props: BorderedTextProps): JSX.Element =>
  <Styles.Container {...props}>
    <Text
      fontWeight={600}
      as="span"
      fontSize={3}
      color={theme.colors.textDark}>
      {props.label}
    </Text>
  </Styles.Container>

BorderedText.defaultProps = {
  label: '',
  active: true
}

export default BorderedText