import { ReactElement } from "react";
import SyntaxHighlighter from "react-syntax-highlighter";
import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";

type CodeHighlighterProps = {
  /**
   * The code to highlight.
   */
  code: string;

  /**
   * Should the element be rounded?
   */
  rounded?: boolean;
};

export function CodeHighlighter({ code, rounded = true }: CodeHighlighterProps): ReactElement {
  return (
    <SyntaxHighlighter
      language="json"
      style={atomOneDark}
      wrapLongLines
      customStyle={{
        maxHeight: "600px",
        backgroundColor: "hsl(var(--popover))",
        wordBreak: "break-all",
        borderRadius: rounded ? "0.75rem" : undefined,
      }}
    >
      {code}
    </SyntaxHighlighter>
  );
}