import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Colors from '../common/Colors';
import { translate } from '../common/localize/i18n';

const WarningContent = ({ ...props }) => {
  const { textContent, heading, style } = props;
  console.log('WARNING ', textContent);
  return (
    <View style={[styles.warningSection, style]}>
      <View style={styles.warningInnerHead}>
        <Text style={{ transform: [{ translateY: -2 }],alignSelf:"center" }}>i</Text>
      </View>
      <View>
        {heading ? (
          <Text style={{ fontFamily: 'Muli-Bold', fontSize: 13, color: Colors.borderBlack, transform: [{ translateY: -2 }] }}>
            {translate(heading)}
          </Text>
        ) : null}
        <Text style={styles.warningText}>{translate(textContent)}</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  warningSection: {
    flexDirection: 'row',
    padding: 10,
    backgroundColor: '#FFF9E4',
    borderRadius: 4,
    marginBottom: 28,
    marginTop: 16,
  },
  warningInnerHead: {
    marginRight: 10,
    borderColor: Colors.digitYellow,
    borderWidth: 1,
    width: 16,
    height: 16,
    justifyContent: 'center',
    alignSelf: 'center',
    borderRadius: 500,
  },
  warningText: {
    fontFamily: 'Muli-Regular',
    fontSize: 13,
    color: Colors.borderBlack,
    paddingRight: 15,
  },
});

export default WarningContent;
