import React from 'react';
import { Modal, Button } from '@akinon/next/components';
import { ConfirmationModalProps } from '../types/custom-render.types';

const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
  open,
  onClose,
  onConfirm,
  title,
  message,
  confirmText,
  cancelText,
  isLoading = false,
  loadingText,
  texts
}) => {
  return (
    <Modal
      portalId="confirmation-modal"
      open={open}
      setOpen={onClose}
      title={title}
      className="w-full sm:w-[28rem] max-h-[90vh] overflow-y-auto"
    >
      <div className="px-6 pb-6">
        <p className="text-center mt-4 mb-6 text-lg">{message}</p>
        <div className="flex gap-3 justify-center">
          <Button
            appearance="outlined"
            className="px-6 py-3 h-auto hover:bg-[#f7f7f7] transition-colors"
            onClick={onClose}
            disabled={isLoading}
          >
            {cancelText || texts.cancelText}
          </Button>
          <Button
            appearance="filled"
            className="px-6 py-3 h-auto"
            onClick={onConfirm}
            disabled={isLoading}
          >
            {isLoading
              ? loadingText || texts.loadingText
              : confirmText || texts.confirmText}
          </Button>
        </div>
      </div>
    </Modal>
  );
};

export default ConfirmationModal;