"use client";

import React from "react";
import ReactDOM from "react-dom";
import styles from "./confirm-modal.module.scss";
import { FiCheck } from "react-icons/fi";

interface ConfirmModalProps {
  isOpen: boolean;
  title?: string;
  message?: string;
  onCancel: () => void;
  onConfirm: () => void;
  loading?: boolean;
}

const ConfirmModal: React.FC<ConfirmModalProps> = ({
  isOpen,
  title = "Confirm Action",
  message = "Are you sure you want to proceed?",
  onCancel,
  onConfirm,
  loading = false,
}) => {
  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div
      className={`${styles.modalBackdrop} ${loading ? styles.loadingBackdrop : ""}`}
      onClick={() => {
        if (!loading) onCancel(); // 🔥 prevent closing while loading
      }}
    >
      <div
        className={styles.modalContent}
        onClick={(e) => e.stopPropagation()}
      >
        {/* ICON */}
        <div className={styles.iconWrapper}>
          <FiCheck />
        </div>

        {/* TITLE */}
        <h2 className={styles.title}>{title}</h2>

        {/* MESSAGE */}
        <p className={styles.message}>{message}</p>

        {/* ACTIONS */}
        <div className={styles.actions}>
          <button
            className={styles.cancelBtn}
            onClick={onCancel}
            disabled={loading}
          >
            Cancel
          </button>

          <button
            className={`${styles.confirmBtn} ${loading ? styles.loadingBtn : ""}`}
            onClick={onConfirm}
            disabled={loading}
          >
            {loading ? (
              <span className={styles.loadingContent}>
                <span className={styles.spinner} />
                Creating...
              </span>
            ) : (
              "Confirm"
            )}
          </button>
        </div>
      </div>
    </div>,
    document.body
  );
};

export default ConfirmModal;