import React from 'react';
import { Modal, Text, View, TouchableOpacity } from 'react-native';
import { Button } from '../Button';

import { styles } from './styles';

import CloseSVG from '../../../assets/icons/close.svg';

interface LocationPopupProps {
  visible: boolean;
  onClose: () => void;
  onAccept: () => void;
  modalText: string;
}

export const LocationPopup: React.FC<LocationPopupProps> = ({
  visible,
  onClose,
  onAccept,
  modalText
}) => {
  return (
    <Modal
      animationType="slide"
      transparent={true}
      visible={visible}
      statusBarTranslucent
    >
      <View style={styles.centeredView}>
        <View style={styles.modalView}>
          <TouchableOpacity style={styles.closeButton} onPress={onClose}>
            <CloseSVG />
          </TouchableOpacity>
          <Text style={styles.modalTitle}>Oops!</Text>
          <Text style={styles.modalText}>
            {modalText}
          </Text>
          <Button onPress={onAccept}>
              OK
          </Button>
        </View>
      </View>
    </Modal>
  );
};