import { ClientOnly } from "@tanstack/react-router";
import { File } from "@pierre/diffs/react";

const FALLBACK_LINES = 40;

function PlainFallback({ contents }: { contents: string }) {
  return (
    <pre className="overflow-x-auto p-4 font-mono text-xs leading-5 text-gray-400">
      {contents.split("\n").slice(0, FALLBACK_LINES).join("\n")}
    </pre>
  );
}

export function CodeFile({ name, contents }: { name: string; contents: string }) {
  return (
    <ClientOnly fallback={<PlainFallback contents={contents} />}>
      <File
        file={{ name, contents, cacheKey: `${name}:${contents.length}` }}
        options={{ theme: "pierre-dark", overflow: "scroll", disableFileHeader: true, enableLineSelection: true }}
      />
    </ClientOnly>
  );
}