import xml from "react-syntax-highlighter/dist/esm/languages/hljs/xml";
import { dracula } from "react-syntax-highlighter/dist/esm/styles/hljs";
import xmlFormat from "xml-formatter";

import { Light as SyntaxHighlighter } from "react-syntax-highlighter";

SyntaxHighlighter.registerLanguage("xml", xml);

export function XMLWidget(p: { src: string }): React.ReactElement {
  const xml = xmlFormat(p.src);

  return (
    <SyntaxHighlighter
      language="xml"
      style={dracula}
      customStyle={{ fontSize: "120%" }}
    >
      {xml}
    </SyntaxHighlighter>
  );
}