import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it } from "vitest";

import { LunarisText } from "@/components/public/lunaris-text";
import type { CatalogTextNode } from "@/lib/catalog/lunaris";

describe("LunarisText", () => {
  it("renders source colors and an accessible interactive term", () => {
    const nodes: CatalogTextNode[] = [
      {
        type: "link",
        target: "N11500003",
        detail: {
          name: "Marvelous Splendor",
          description: "First line\nSecond line",
        },
        children: [{ type: "text", value: "Marvelous Splendor" }],
      },
      { type: "text", value: " deals " },
      {
        type: "color",
        value: "#99FFFFFF",
        children: [{ type: "text", value: "Cryo AoE DMG" }],
      },
    ];

    const html = renderToStaticMarkup(
      <LunarisText nodes={nodes} fallback="fallback" />,
    );

    expect(html).toContain("Marvelous Splendor");
    expect(html).toContain("aria-label=\"เปิดรายละเอียด Marvelous Splendor\"");
    expect(html).toContain("hover:bg-primary/15");
    expect(html).toContain("hover:decoration-2 hover:decoration-primary");
    expect(html).toContain("color:#99FFFFFF");
    expect(html).toContain("Cryo AoE DMG");
    expect(html).not.toContain("fallback");
  });

  it("uses plain text for catalogs without structured nodes", () => {
    expect(renderToStaticMarkup(
      <LunarisText fallback="Legacy detail" />,
    )).toContain("Legacy detail");
  });
});