import * as React from 'react';
import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
// import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
import darcula from 'react-syntax-highlighter/dist/esm/styles/prism/darcula';
import js from 'react-syntax-highlighter/dist/esm/languages/prism/javascript';
import sh from 'react-syntax-highlighter/dist/esm/languages/prism/bash';

SyntaxHighlighter.registerLanguage('javascript', js);
SyntaxHighlighter.registerLanguage('bash', sh);

export const CodeBlock = React.memo(function CodeBlock({
  language,
  value,
}: {
  language: string;
  value: string;
}) {
  return (
    <SyntaxHighlighter
      language={language}
      style={{ ...darcula, padding: '30px' }}
    >
      {value}
    </SyntaxHighlighter>
  );
});