import * as React from 'react';
import {Platform, Text, StyleSheet, TouchableOpacity} from 'react-native';
import {Image, View} from 'react-native-animatable';
import {SCREEN_HEIGHT} from '../../utils';
import CloseIcon from '../../assets/ionicons/close-outline.svg';

type TaggPromptProps = {
  messageHeader: string;
  messageBody: string;
  logoType: string;
  onClose: () => void;
};

const TaggPrompt: React.FC<TaggPromptProps> = ({
  messageHeader,
  messageBody,
  logoType,
  onClose,
}) => {
  /**
   * Generic prompt for Tagg
   */

  return (
    <View style={styles.container}>
      <Image
        style={styles.icon}
        source={require('../../assets/icons/plus-logo.png')}
      />
      <Text style={styles.header}>{messageHeader}</Text>
      <Text style={styles.subtext}>{messageBody}</Text>
      <TouchableOpacity
        style={styles.closeButton}
        onPress={() => {
          onClose();
        }}>
        <CloseIcon height={'50%'} width={'50%'} color="gray" />
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
    height: SCREEN_HEIGHT / 4.5,
    paddingTop: SCREEN_HEIGHT / 10,
    paddingBottom: SCREEN_HEIGHT / 50,
  },
  closeButton: {
    position: 'relative',
    height: '40%',
    bottom: SCREEN_HEIGHT / 6,
    aspectRatio: 1,
    alignSelf: 'flex-end',
  },
  icon: {
    width: 40,
    height: 40,
  },
  header: {
    color: 'black',
    fontSize: 16,
    fontWeight: '600',
    textAlign: 'center',
    marginTop: '2%',
  },
  subtext: {
    color: 'gray',
    fontSize: 12,
    fontWeight: '500',
    textAlign: 'center',
    marginTop: '2%',
  },
});
export default TaggPrompt;