"use client";
import { cn } from "@/lib/utils";
import React from "react";

import ReactMarkdown, { Components } from "react-markdown";
import remarkGfm from "remark-gfm";
const page = () => {
  const handleClick = (someParams: string) => {
    console.log("This fn works!");
  };
  const component: Components = {
    a: ({ children, node, ...props }) => {
      console.log("Hi, Am loggin in server too!");
      if (
        node.properties?.href &&
        node.properties?.href.toString().startsWith("function:")
      ) {
        const functionName = node.properties?.href
          .toString()
          .replace("function:", "");
        return (
          <button
            onClick={() => handleClick(functionName)}
            style={{ cursor: "pointer", textDecoration: "underline" }}
          >
            {children}
          </button>
        );
      }
      return <a {...props}>{children}</a>;
    },
  };
  return (
    <div>
      <div>
        <ReactMarkdown
          className={cn("prose", {
            "": true,
          })}
          components={component}
          remarkPlugins={[remarkGfm]}
        >
          [Click me](function:handleClick)
        </ReactMarkdown>
      </div>
    </div>
  );
};

export default page;

just wanted to if i add something like this is vulnerable? and the content from the ReactMarkdown is rendered from OpenAI ChatGPT
and user can interact with the ChatGPT to render diffrent markdowns