// CRITICAL
"use client";

import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";

interface CodePreviewProps {
  code: string;
  language?: string;
  showLineNumbers?: boolean;
  className?: string;
  maxHeight?: number;
}

export function CodePreview({
  code,
  language = "text",
  showLineNumbers = true,
  className,
  maxHeight,
}: CodePreviewProps) {
  const trimmed = String(code ?? "").replace(/\n$/, "");

  return (
    <div
      className={className}
      style={
        maxHeight
          ? {
              maxHeight: `${maxHeight}px`,
              overflow: "auto",
            }
          : undefined
      }
    >
      <SyntaxHighlighter
        language={language}
        style={vscDarkPlus}
        customStyle={{
          margin: 0,
          padding: "1rem",
          background: "transparent",
          fontSize: "0.875rem",
          lineHeight: "1.6",
        }}
        showLineNumbers={showLineNumbers}
        lineNumberStyle={{
          color: "var(--muted)",
          fontSize: "0.75rem",
          paddingRight: "1rem",
          minWidth: "2.5rem",
          textAlign: "right",
          userSelect: "none",
        }}
        wrapLongLines
      >
        {trimmed}
      </SyntaxHighlighter>
    </div>
  );
}