import Markdown from 'react-markdown'
import classNames from '@/utils/classNames'
import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'

const CodeBox = (props: {
    markdown: string
    className?: string
    language?: string
}) => {
    const { markdown, className, language = 'tsx' } = props

    return (
        <Markdown
            components={{
                pre: ({ children }) => <>{children}</>,
                code: (props) => (
                    <SyntaxHighlighter
                        className={classNames('not-prose text-sm', className)}
                        language={language}
                    >
                        {props.children as string}
                    </SyntaxHighlighter>
                ),
            }}
        >
            {markdown}
        </Markdown>
    )
}

export default CodeBox