import React from 'react';
import {View} from 'react-native';
import {Modal} from '../Common/modal';
import {Images} from '../../utils/images';
import {SmartImage} from '../Images/SmartImage';
import {Button} from '../Button';
import { fontSz, ms } from '../../utils/constants';
import { Colors } from '../../utils/colors';
import {Text} from '../Text';

type Props = {
  onClose?: () => void;
  title: string;
  description: string;
  image: any;
  buttonText: string;
  onButtonPress?: () => void;
  minHeight?: number;
};

const Notification = (props: Props) => {
  const {onClose, image, title, description, buttonText, onButtonPress, minHeight = ms(280)} = props;
  return (
    <Modal visible={true} onClose={onClose} containerStyle={{paddingHorizontal: ms(20), paddingVertical: ms(30), minHeight}}>
      <View
        style={{
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          marginBottom: ms(20),
        }}>
        <SmartImage source={image} style={{height: ms(70), resizeMode: 'contain'}} />
      </View>
      <Text
          style={{
            color: Colors.payLaterHeaderText,
          }}
          fontWeight="600"
          fontFamily={'Gordita-Medium'}
          textAlign={'center'}
          fontSize={fontSz(16)}
          text={title}
        />
         <Text
          style={{
            color: Colors.lightBaseBlueText,
            paddingVertical: ms(10),
          }}
          fontWeight="400"
          fontFamily={'Gordita-Regular'}
          textAlign={'center'}
          fontSize={fontSz(13)}
          text={description}
          lineHeight={fontSz(20)}
        />
      {/* <View
        style={{
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          marginTop: 20,
        }}>
        <Text
          style={{
            fontSize: 18,
            fontWeight: 'bold',
            textAlign: 'center',
            marginBottom: 10,
          }}>
          {title}
        </Text>
      </View> */}
      {/* <Text
        style={{
          fontSize: 14,
          textAlign: 'center',
          color: '#666',
          marginBottom: 20,
        }}>
        {description}
      </Text> */}
      {onButtonPress && buttonText && (
        <Button
          title={buttonText}
          onPress={() => {
            onButtonPress();
          }}
          style={{marginBottom: ms(20)}}
          disabled={false}
        />
      )}
    </Modal>
  );
};

export default Notification;