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

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}>
          <AppText style={styles.title}>{title}</AppText>
          <AppText style={styles.message}>{message}</AppText>

          <View style={styles.buttons}>
            {onCancel && (
              <TouchableOpacity
                onPress={() => {
                  onCancel();
                  closeModal();
                }}
              >
                <AppText style={styles.cancel}>Bekor qilish</AppText>
              </TouchableOpacity>
            )}
            <TouchableOpacity
              onPress={() => {
                onConfirm?.();
                closeModal();
              }}
            >
              <AppText style={styles.confirm}>Ok</AppText>
            </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;
