import React from 'react';
import Highlight, { defaultProps, Language } from 'prism-react-renderer'

type SyntaxHighlighterProps = {
    children?: string
    language?: Language
}

const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({
    children,
    language
}) => {
    return (
        <Highlight
            {...defaultProps}
            code={children.trim()}
            language={language || 'jsx'}
            theme={undefined}
        >
            {({ tokens, getLineProps, getTokenProps }) => (
                <pre className="prism-code">
                    {tokens.map((line, i) => (
                        <div {...getLineProps({ line, key: i })}>
                            {line.map((token, key) => (
                                <span {...getTokenProps({ token, key })} />
                            ))}
                        </div>
                    ))}
                </pre>
            )}
        </Highlight>
    )
}

export default SyntaxHighlighter;