import * as React from 'react';
import { View, Text } from 'react-native';

//import { Text } from '~/components/text';
import { capitalize } from '../../utils/string';

import { AppVersionProps } from './app-version.props';
import { appVersionStyles as styles } from './app-version.styles';

export const AppVersion: React.FC<AppVersionProps> = (props) => {
  const { build, revision, style, textStyle, version, backend } = props;

  return (
    <View style={[styles.root, style]}>
      <Text
        preset="caption"
        // TODO
        //style={[styles.text, textStyle]}
        style={[styles.text]}
        tx="component.appVersion.prefix"
        txOptions={{ version, build, revision }}
      />
      {backend && (
        <Text
          preset="caption"
          // TODO
         // style={[styles.text, textStyle, styles.backendText]}
         style={[styles.text, styles.backendText]}
          testID={'backendText'}
        >
          {capitalize(backend)}
        </Text>
      )} 
    </View>
  );
};
