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

interface Props {
  label: string;
  data: string;
  onPress?: () => void;
}

export const DataElement: React.SFC<Props> = ({ label, data, onPress }) => (
  <View style={styles.container}>
    <Text style={styles.label}>
      {label}
    </Text>
    <TouchableNativeFeedback onPress={onPress}>
      <View style={styles.content}>
        <Text>
          {data}
        </Text>
      </View>
    </TouchableNativeFeedback>
  </View>
);

const styles = StyleSheet.create({
  container: {
    marginVertical: 4,
  },
  content: {
    marginVertical: 2,
  },
  label: {
    fontSize: 11,
    fontWeight: 'bold',
  },
});
