import React from 'react';
import { Platform, StyleSheet, Text } from 'react-native';

const HeaderTitle = ({scope, style=styles.titleColor}) => (
  <Text
    ariaLevel="1"
    numberOfLines={1}
    accessibilityRole="header"
    style={[styles.title, style]}>
    {$t(scope)}
  </Text>
);

export default HeaderTitle;

const styles = StyleSheet.create({
  title: Platform.select({
    ios: {
      fontSize: 17,
      fontWeight: '600'
    },
    android: {
      fontSize: 20,
      fontFamily: 'sans-serif-medium',
      fontWeight: 'normal'
    },
    default: {
      fontSize: 18,
      fontWeight: '500'
    }
  }),
  titleColor: {
    color: pageTitleTint
  }
})