import React from "react";
import dynamic from "next/dynamic";
import { MDXRemote, type MDXRemoteSerializeResult } from "next-mdx-remote";

import CallToAction from "@/components/call-to-action";
import Debug from "@/components/debug";
import Icon from "@/components/icon";
import SplitText from "@/components/split-text";

const MDX_COMPONENTS = {
  CallToAction,
  DebugTypography: Debug.Typography,
  Icon,
  SplitText,
  a: ({ href, children }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
    <CallToAction href={href} variant="linkInline">
      {children}
    </CallToAction>
  ),
};

interface MDXWrapperProps {
  mdxSource: MDXRemoteSerializeResult;
}

const MDXWrapper = ({ mdxSource }: MDXWrapperProps) => {
  return <MDXRemote {...mdxSource} components={MDX_COMPONENTS} />;
};

export default MDXWrapper;