// Reproduction of the JSX shape that produced `FactIndex: conflicting facts`
// when rendering i18next render-props. The walker must emit one literal per
// inner element and join cleanly into a fresh FactIndex.
import { describe, expect, it } from "vitest";

import { FactIndex } from "@fragments-sdk/core";

import { extractJsxFacts } from "../../usage/jsx.js";

const FILE = "src/Translations.tsx";

const SOURCE = `import { Trans } from 'react-i18next';

export default function Translations() {
  return (
    <Trans
      flowchartLink={(el: any) => <a className="text-blue-500 underline">{el}</a>}
      sequenceLink={(el: any) => <a className="text-blue-500 underline">{el}</a>}
      classLink={(el: any) => <a className="text-blue-500 underline">{el}</a>}
    />
  );
}
`;

describe("extractClassnames — §1.8 i18next render-prop", () => {
  it("emits three classname_literal facts (one per inner <a>)", () => {
    const facts = extractJsxFacts(SOURCE, FILE);
    const literals = facts.filter((f) => f.kind === "classname_literal");
    expect(literals).toHaveLength(3);
    for (const f of literals) {
      if (f.kind !== "classname_literal") throw new Error("unreachable");
      expect(f.classes).toEqual(["text-blue-500", "underline"]);
    }
  });

  it("does not produce FactIndex collisions", () => {
    const facts = extractJsxFacts(SOURCE, FILE);
    const ix = new FactIndex();
    expect(() => ix.addMany(facts)).not.toThrow();
  });
});
