import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import v from '../../config/variables'

const InputHintContainer = styled.div`
  color: ${v.input.placeholderColor};
  font-size: 14px;
  margin-left: ${v.base.gutter * 2}px;
  margin-top: ${v.base.gutter / 2}px;
`

class InputHint extends React.Component {
  static propTypes = {
    children: PropTypes.string.isRequired
  }

  render() {
    return (
      <InputHintContainer>
        {this.props.children}
      </InputHintContainer>
    )
  }
}

export default InputHint
