import React from 'react';
import { Modal, View, Text, TouchableOpacity } from 'react-native';
import { AppButton } from './AppButton';

interface ConfirmModalProps {
  visible: boolean;
  title: string;
  message: string;
  confirmLabel?: string;
  cancelLabel?: string;
  confirmVariant?: 'primary' | 'danger';
  onConfirm: () => void;
  onCancel: () => void;
}

export const ConfirmModal: React.FC<ConfirmModalProps> = ({
  visible,
  title,
  message,
  confirmLabel = 'Confirm',
  cancelLabel = 'Cancel',
  confirmVariant = 'primary',
  onConfirm,
  onCancel,
}) => {
  return (
    <Modal visible={visible} transparent animationType="fade" onRequestClose={onCancel}>
      <TouchableOpacity
        className="flex-1 bg-black/50 items-center justify-center px-6"
        activeOpacity={1}
        onPress={onCancel}
      >
        <TouchableOpacity
          className="w-full bg-white rounded-2xl p-6 shadow-lg"
          activeOpacity={1}
        >
          <Text className="text-xl font-bold text-gray-900 mb-2">{title}</Text>
          <Text className="text-gray-600 text-sm mb-6">{message}</Text>
          <View className="flex-row gap-3">
            <AppButton
              title={cancelLabel}
              onPress={onCancel}
              variant="outline"
              className="flex-1"
            />
            <AppButton
              title={confirmLabel}
              onPress={onConfirm}
              variant={confirmVariant}
              className="flex-1"
            />
          </View>
        </TouchableOpacity>
      </TouchableOpacity>
    </Modal>
  );
};