import * as React from 'react';
import { Props, State } from './type';
import styled from 'styled-components'

import { BaseComponent } from '../base-component'

import {rem} from '../style/function.style'

const TextComponent = styled.div`
  box-sizing: border-box;
  padding: ${rem(20)} ${rem(24)};
`

export class Text extends React.Component<Props, State> {
  public static defaultProps = new Props();
  public state = new State();
  
  public render() {
    let {
      style
    } = this.props
    let {
      htmlFontSize
    } = this.state
    let fontSize = (style.fontSize / htmlFontSize).toFixed(2) + 'rem'
    
    return (
      <TextComponent style={{...style, fontSize}}>
        <BaseComponent {...this.props}>
          {this.props.title}
        </BaseComponent>
      </TextComponent>
    )
  }
}