// components/GlobalModal.tsx
import React from 'react';
import { Modal, View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { useModalStore } from 'screens/auth/registeration/lib/modalStore';

const GlobalModal = () => {
    const {
        isVisible,
        title,
        message,
        type,
        onConfirm,
        onCancel,
        closeModal,
    } = useModalStore();

    return (
        <Modal
            visible={isVisible}
            transparent
            animationType="fade"
            onRequestClose={closeModal}
        >
            <View style={styles.overlay}>
                <View style={styles.modal}>
                    <Text style={styles.title}>{title}</Text>
                    <Text style={styles.message}>{message}</Text>

                    <View style={styles.buttons}>
                        {onCancel && (
                            <TouchableOpacity onPress={() => { onCancel(); closeModal(); }}>
                                <Text style={styles.cancel}>Bekor qilish</Text>
                            </TouchableOpacity>
                        )}
                        <TouchableOpacity
                            onPress={() => {
                                onConfirm?.();
                                closeModal();
                            }}
                        >
                            <Text style={styles.confirm}>Ok</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        </Modal>
    );
};

const styles = StyleSheet.create({
    overlay: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.4)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    modal: {
        width: '80%',
        padding: 20,
        backgroundColor: '#fff',
        borderRadius: 10,
        elevation: 5,
    },
    title: {
        fontSize: 18,
        fontWeight: 'bold',
        marginBottom: 10,
    },
    message: {
        fontSize: 15,
        marginBottom: 20,
    },
    buttons: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        gap: 10,
    },
    cancel: {
        color: 'red',
        fontWeight: 'bold',
        marginRight: 15,
    },
    confirm: {
        color: '#007bff',
        fontWeight: 'bold',
    },
});

export default GlobalModal;
