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

const FALLBACK_LINES = 40;

/**
 * `disableFileHeader` leaves the shadow root's <pre> empty (a @pierre/diffs bug), so the built-in
 * header is hidden with CSS instead; the page already shows the file name and size above.
 */
const FILE_OPTIONS = {
  theme: "pierre-dark",
  overflow: "scroll",
  enableLineSelection: true,
  unsafeCSS: "[data-diffs-header] { display: none; }",
} as const;

function PlainFallback({ contents }: { contents: string }) {
  return (
    <pre className="overflow-x-auto p-4 font-mono text-xs leading-5 text-kumo-subtle">
      {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={FILE_OPTIONS} />
    </ClientOnly>
  );
}