import Styles from '@/constants/Styles';
import { useTheme } from '@/providers/ThemeProvider';
import React from 'react';
import { Modal, TouchableOpacity, View } from 'react-native';
import Text from './Text';

interface ModalConfirmationProps {
   visible: boolean;
   title: string;
   message: string;
   onConfirm: () => void;
   onCancel: () => void;
   confirmText?: string;
   cancelText?: string;
   isDestructive?: boolean;
}

const ModalConfirmation: React.FC<ModalConfirmationProps> = ({
   visible,
   title,
   message,
   onConfirm,
   onCancel,
   confirmText = 'Ya',
   cancelText = 'Batal',
   isDestructive = false,
}) => {
   const { colors } = useTheme();

   return (
      <Modal
         transparent
         visible={visible}
         animationType="fade"
         onRequestClose={onCancel}
      >
         <View style={Styles.modalOverlay}>
            <View style={[Styles.modalConfirmContainer, { backgroundColor: colors.modalBackground }]}>
               <View style={Styles.modalConfirmContent}>
                  <Text style={Styles.modalConfirmTitle}>{title}</Text>
                  <Text style={[Styles.modalConfirmMessage, { color: colors.text }]}>
                     {message}
                  </Text>
               </View>

               <View style={[Styles.modalConfirmDivider, { backgroundColor: colors.icon + '20' }]} />

               <View style={Styles.modalConfirmFooter}>
                  <TouchableOpacity
                     style={Styles.modalConfirmButton}
                     onPress={onCancel}
                     activeOpacity={0.7}
                  >
                     <Text style={[Styles.modalConfirmButtonText, { color: colors.text }]}>
                        {cancelText}
                     </Text>
                  </TouchableOpacity>

                  <View style={[Styles.modalConfirmVerticalDivider, { backgroundColor: colors.icon + '20' }]} />

                  <TouchableOpacity
                     style={Styles.modalConfirmButton}
                     onPress={onConfirm}
                     activeOpacity={0.7}
                  >
                     <Text
                        style={[
                           Styles.modalConfirmButtonText,
                           { color: isDestructive ? colors.error : colors.text }
                        ]}
                     >
                        {confirmText}
                     </Text>
                  </TouchableOpacity>
               </View>
            </View>
         </View>
      </Modal>
   );
};

export default ModalConfirmation;