import { CopyButton } from "./CopyButton";
import { Tabs } from "./Tabs";

/** CitationPanel — BibTeX / RIS / plain text with copy and download. Content is computed server-side. */
export function CitationPanel({
  slug,
  bibtex,
  ris,
  plain,
}: {
  slug: string;
  bibtex: string;
  ris: string;
  plain: string;
}) {
  const panel = (text: string, ext: string, pre = true) => (
    <div>
      {pre ? (
        <pre className="surface-muted max-h-72 overflow-auto p-4 text-[12px] leading-relaxed">{text}</pre>
      ) : (
        <p className="surface-muted prose-paper p-4 text-sm">{text}</p>
      )}
      <div className="mt-2 flex gap-2">
        <CopyButton text={text} />
        <a className="btn btn-sm" href={`/research/${slug}/cite.${ext}`}>
          Download .{ext}
        </a>
      </div>
    </div>
  );
  return (
    <Tabs
      tabs={[
        { label: "BibTeX", content: panel(bibtex, "bib") },
        { label: "RIS", content: panel(ris, "ris") },
        { label: "Plain text", content: panel(plain, "txt", false) },
      ]}
    />
  );
}