import React from "react";

interface LogoutModalProps {
  open: boolean;
  onClose: () => void;
  onConfirm: () => void | Promise<void>;
}

const LogoutModal: React.FC<LogoutModalProps> = ({ open, onClose, onConfirm }) => {
  if (!open) return null;

  return (
    <dialog open className="modal">
      <div className="modal-box max-w-[75vw]">
        <h3 className="font-bold text-sm text-error">Confirm Logout</h3>

        <p className="py-2 text-xs font-medium">
          Are you sure you want to logout? You will need to login again to access your dashboard.
        </p>

        <div className="modal-action">

          {/* Cancel */}
          <button
            type="button"
            className="btn btn-ghost btn-xs"
            onClick={onClose}
          >
            Cancel
          </button>

          {/* Logout */}
          <button
            type="button"
            className="btn btn-error btn-xs"
            onClick={onConfirm}
          >
            Logout
          </button>

        </div>
      </div>
    </dialog>
  );
};

export default LogoutModal;