import Radium from 'radium'
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { fontInfo } from './style'

class Text extends Component {
  static propTypes = {
    size: PropTypes.string,
    margin: PropTypes.number,
    children: PropTypes.node,
    tone: PropTypes.string,
    width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
    align: PropTypes.string,
  }

  static defaultProps = {
    size: 'medium',
    tone: 'normal',
    margin: 0,
    align: 'left',
  }

  render() {
    const { margin, width, align } = this.props

    return (
      <span style={{
        display: 'inline-block',
        fontSize: fontInfo.size[this.props.size],
        fontFamily: fontInfo.family,
        color: fontInfo.color[this.props.tone],
        textAlign: align,
        margin,
        width,
      }}>{this.props.children}</span>
    )
  }
}

export default Radium(Text)