import React, { Component } from 'react';
import {
  StyleSheet
} from 'react-native';
import DeviceInfo from 'react-native-device-info'

import ClearText from './text'

export default class Heading extends Component {
  render() {
    const {style, ...props} = this.props
    return (
      <ClearText style={[styles.heading, style]} {...props} />
    )
  }
}

const isIphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))
const isIpad = (navigator.userAgent.match(/iPad/i))
const isAndroid = (navigator.userAgent.match(/Android/i))
const isMobile = isIphone || isIpad || isAndroid
const isDesktop = ! isMobile

const styles = StyleSheet.create({
  heading: {
    marginLeft: 0,
    paddingTop: isMobile ? 5 : 10,
    paddingLeft: 0,
    paddingRight: 0,
    paddingBottom: isMobile ? 10 : 30,
    fontSize: isMobile ? 20 : 25,
    textAlign: 'center',
  }
})