export const getElementDisplayName = (element: any): string => {
  if (!element) return "Unknown";

  const type = element.type;
  const clientReferenceId =
    typeof type?.$$id === "string" ? type.$$id.split("#").pop() : undefined;
  const payloadValue = type?._payload?.value;
  const payloadName =
    typeof payloadValue === "string"
      ? payloadValue.split("#").pop()
      : payloadValue?.name;

  return (
    element?.props?.mdxType ||
    type?.displayName ||
    type?.render?.displayName ||
    type?.render?.name ||
    type?.name ||
    type?.type?.displayName ||
    type?.type?.name ||
    clientReferenceId ||
    payloadName ||
    (typeof type === "string" ? type : "Component")
  );
};