import React from "react";
import ReactMarkdown from "react-markdown";
import { Highlight, themes } from "prism-react-renderer";

const MarkdownRenderer2 = ({ content }: { content: string }) => {
    return (
        <ReactMarkdown
            components={{
                code({ node, inline, className, children, ...props }: any) {
                    const { key, ...cleanProps } = props;

                    const match = /language-(\w+)/.exec(className || "");
                    const language = match ? match[1] : "";

                    if (!inline && match) {
                        return (
                            <Highlight
                                key={key}
                                theme={themes.vsDark}
                                code={String(children).replace(/\n$/, "")}
                                language={language}
                            >
                                {({
                                    className,
                                    style,
                                    tokens,
                                    getLineProps,
                                    getTokenProps,
                                }) => (
                                    <pre
                                        className={className}
                                        style={{
                                            ...style,
                                            padding: "1.5rem",
                                            borderRadius: "8px",
                                            fontSize: "0.9rem",
                                            overflowX: "auto",
                                        }}
                                    >
                                        {tokens.map((line, i) => (
                                            <div
                                                key={i}
                                                {...getLineProps({
                                                    line,
                                                    key: i,
                                                })}
                                            >
                                                {line.map((token, key) => (
                                                    <span
                                                        key={key}
                                                        {...getTokenProps({
                                                            token,
                                                            key,
                                                        })}
                                                    />
                                                ))}
                                            </div>
                                        ))}
                                    </pre>
                                )}
                            </Highlight>
                        );
                    }

                    // Fallback for inline code or code without a language tag
                    return (
                        <code key={key} className={className} {...cleanProps}>
                            {children}
                        </code>
                    );
                },
            }}
        >
            {content}
        </ReactMarkdown>
    );
};

export default MarkdownRenderer2;
