import React from "react";
import type { MDXComponents } from "mdx/types";
import H1 from "../../layout/H1";
import H2 from "../../layout/H2";
import H3 from "../../layout/H3";
import H4 from "../../layout/H4";
import CodeBlock from "../../elements/CodeBlock";

type Params = {
    components: MDXComponents;
    codeBgColor?: string;
};

export default function useMDXComponents({
    components,
    codeBgColor,
}: Params): MDXComponents {
    return {
        h1: ({ children }) => <H1>{children}</H1>,
        h2: ({ children }) => <H2>{children}</H2>,
        h3: ({ children }) => <H3>{children}</H3>,
        h4: ({ children }) => <H4>{children}</H4>,
        pre: ({ children, ...props }) => {
            if (React.isValidElement(children) && children.props) {
                return (
                    <CodeBlock {...props} backgroundColor={codeBgColor}>
                        {children.props.children}
                    </CodeBlock>
                );
            }
            return (
                <CodeBlock {...props} backgroundColor={codeBgColor}>
                    {children}
                </CodeBlock>
            );
        },
        ...components,
    };
}