import React from 'react';
import {styles} from './ToastNotification.style'
import { View, Text, Button,Dimensions } from 'react-native';
import Toast, { ToastConfig } from 'react-native-toast-message';

const ToastNotification = () => {
  
  
  const handleToast = () => {
    Toast.show({
      type: "",

      text1: 'Alert title goes here according to requirement nklgnnaoignaiginangv',
      // text2:'safnadngnoandg',
      autoHide:true,
      visibilityTime:3000,
    });
  };

  const toastConfig: ToastConfig = {
    Success: ({ text1 }) => (
      
      <View style={styles.toastMainView}>
        <View style={{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"space-around"}}>
        {/* <RightCircle/> */}
        <Text style={styles.toastMessageTextSyle}>{text1}</Text>
        </View>
        {/* <InputCrossIcon/> */}
      </View>
  
    ),

    Error: ({ text1 }) => (
      
      <View style={styles.toastMainView}>
        <View style={{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"space-around"}}>
        {/* <RightCircle/> */}
        <Text style={styles.toastMessageTextSyle}>{text1}</Text>
        </View>
        {/* <InputCrossIcon/> */}
      </View>
  
    ),


    
  };

  return (
    <View>
      
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>ToastNotification</Text>
        <Button title="Toast click" onPress={handleToast} />
      </View>


      <Toast config={
       toastConfig
      } />
    </View>
  );
};

export default ToastNotification;