import React from "react";
import { MdInfo } from "react-icons/md";

interface ConfirmationModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  title: string;
  description?: string;
  iconColor?: string;
  iconContainerColor?: string;
  confirmText?: string;
  cancelText?: string;
  autoCloseOnConfirm?: boolean;
}

const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
  isOpen,
  onClose,
  onConfirm,
  title,
  description,
  iconColor = "#0F2851",
  iconContainerColor = "#FFE5E5",
  confirmText = "Yes",
  cancelText = "No",
  autoCloseOnConfirm = true,
}) => {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 overflow-y-auto">
      <div className="flex min-h-screen items-center justify-center p-4 text-center">
        <div
          className="fixed inset-0 bg-black bg-opacity-30 transition-opacity"
          onClick={onClose}
        ></div>

        <div className="relative w-full max-w-md transform overflow-hidden rounded-lg bg-white px-8 py-16 text-left shadow-xl transition-all">
          <div className="flex flex-col items-center">
            {/* Icon */}
            <div
              className="flex h-32 w-32 items-center justify-center rounded-full mb-8"
              style={{ backgroundColor: iconContainerColor }}
            >
              <MdInfo size={60} color={iconColor} />
            </div>

            {/* Title */}
            <h3 className="text-2xl font-bold text-[#0F2851] mb-4">{title}</h3>

            {/* Description */}
            {description && (
              <div className="mb-8 text-center">
                <p className="text-lg text-gray-500 whitespace-pre-line">
                  {description}
                </p>
              </div>
            )}

            {/* Action Buttons */}
            <div className="w-full flex space-x-4">
              <button
                type="button"
                className="w-1/2 rounded-xl border border-[#3997E0] bg-white px-4 py-2 text-lg font-medium text-[#3997E0] hover:bg-gray-50 focus:outline-none"
                onClick={onClose}
              >
                {cancelText}
              </button>
              <button
                type="button"
                className="w-1/2 rounded-xl bg-[#3997E0] px-4 py-2 text-lg font-medium text-white hover:bg-blue-600 focus:outline-none"
                onClick={() => {
                  onConfirm();
                  if (autoCloseOnConfirm) {
                    onClose();
                  }
                }}
              >
                {confirmText}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ConfirmationModal;