import InsetPanel from "./InsetPanel";

interface DiffViewerProps {
  diff: string;
  className?: string;
}

export default function DiffViewer({ diff, className }: DiffViewerProps) {
  if (!diff) return null;

  return (
    <InsetPanel
      tone="code"
      padding="sm"
      className={`mt-2 max-h-96 overflow-auto font-mono text-xs leading-5 ${className ?? ""}`.trim()}
    >
      {diff.split("\n").map((line, index) => {
        let lineClassName = "app-text-faint px-3";
        if (line.startsWith("+") && !line.startsWith("+++")) {
          lineClassName = "app-code-line-added px-3";
        } else if (line.startsWith("-") && !line.startsWith("---")) {
          lineClassName = "app-code-line-removed px-3";
        } else if (line.startsWith("@@")) {
          lineClassName = "app-code-line-meta px-3";
        }

        return (
          <div key={`${index}-${line}`} className={lineClassName}>
            <span className="select-all whitespace-pre">{line}</span>
          </div>
        );
      })}
    </InsetPanel>
  );
}