import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import theme from "react-syntax-highlighter/dist/cjs/styles/prism/one-light";

import styles from "./styles.module.scss";

interface CodeNodeProps {
  code?: string;
  language?: string;
  linesToBeHighlighted?: number[];
}

export default function CodeNode({
  code,
  language,
  linesToBeHighlighted,
}: CodeNodeProps) {
  if (code) {
    return (
      <div className={styles.codeNode}>
        <SyntaxHighlighter
          style={theme}
          language={language}
          showLineNumbers
          wrapLines
          lineProps={(lineNumber) =>
            linesToBeHighlighted?.includes(lineNumber - 1)
              ? { style: { backgroundColor: "rgba(0,0,0,0.05)" } }
              : {}
          }
        >
          {code}
        </SyntaxHighlighter>
      </div>
    );
  } else {
    return null;
  }
}