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

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}>
                    <Text style={styles.closeText}>Yopish</Text>
                </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;