import * as React from 'react'
import { StyleSheet, Text as NativeComponent } from 'react-native'
import { HeaderProps } from './interfaces'

const sizes: {[key: string]: string} = {
    xl: '24px',
    lg: '22px',
    md: '20px',
    sm: '18px',
    xs: '16px',
}

export class Header extends React.Component<HeaderProps, {}> {

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

    public styles() {
        const size = this.props.size || 'md'
        return {
            height: 50,
            fontSize: sizes[size],
        }
    }
}