import React, { useCallback, useMemo } from 'react';
import { Modal, StyleSheet, TouchableOpacity, View } from 'react-native';
import { WebView } from 'react-native-webview';
import AppText from './AppText';

type Props = {
  visible: boolean;
  url: string;
  onClose: () => void;
};

const InAppBrowser = ({ visible, url, onClose }: Props) => {
  const webViewSource = useMemo(() => ({ uri: url }), [url]);

  const handleClose = useCallback(() => {
    onClose();
  }, [onClose]);

  return (
    <Modal visible={visible} animationType="slide">
      <View style={styles.container}>
        <TouchableOpacity style={styles.closeButton} onPress={handleClose}>
          <AppText style={styles.closeText}>Yopish</AppText>
        </TouchableOpacity>
        <WebView source={webViewSource} />
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1 },
  closeButton: {
    padding: 10,
    backgroundColor: '#28A7E8',
    alignItems: 'center',
  },
  closeText: {
    color: 'white',
    fontSize: 16,
  },
});

export default InAppBrowser;
