import * as React from "react";
import { Text, Platform, View, StyleSheet } from "react-native";

type Props = {
  title: string;
  screenStyles: {
    title_font_color: string;
    title_font_android: string;
    title_font_ios: string;
    title_font_size: string;
  };
};

const BarTitle = ({ title, screenStyles }: Props) => {
  const styles = StyleSheet.create({
    view: {
      flex: 1,
      justifyContent: "center",
      height: 50,
    },
    text: {
      fontWeight: "bold",
      textAlign: "center",
      textAlignVertical: "center",
      color: screenStyles.title_font_color,
      fontFamily: Platform.select({
        android: screenStyles.title_font_android,
        ios: screenStyles.title_font_ios,
      }),
      fontSize: Number(screenStyles.title_font_size) || 20,
    },
  });

  const text = title || "";

  return (
    <View style={styles.view}>
      <Text style={styles.text}>{text}</Text>
    </View>
  );
};

export default BarTitle;