import React, { PureComponent } from "react";
import PropTypes from "prop-types";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { okaidia } from "react-syntax-highlighter/dist/esm/styles/prism";

class CodeBlock extends PureComponent {
  /* NOTE: the line-numbers plugin isn't working.
   * See https://betterstack.dev/blog/code-highlighting-in-react-using-prismjs/ 
   * for some clues on how to fix it. */
  static propTypes = {
    value: PropTypes.string.isRequired,
    language: PropTypes.string,
    plugins: PropTypes.arrayOf(PropTypes.string)
  };

  static defaultProps = {
    language: null,
    plugins: [ "line-numbers" ]
  };

  render() {
    const { language, plugins, value } = this.props;
    return (
      <SyntaxHighlighter className="line-numbers" language={language} style={okaidia} plugins={plugins}>
        {value}
      </SyntaxHighlighter>
    );
  }
}

export default CodeBlock;