import { render } from "@testing-library/react";
import { OgCard, readProjectOgBackground } from "./og-card";

describe("readProjectOgBackground", () => {
  it("returns the recorded cover of a showcase project as a JPEG data URI", () => {
    const uri = readProjectOgBackground("nutriscan");
    expect(uri).toMatch(/^data:image\/jpeg;base64,/);
    expect((uri ?? "").length).toBeGreaterThan(5_000);
  });

  it("returns undefined for projects without a recorded cover", () => {
    expect(readProjectOgBackground("twins-lab")).toBeUndefined();
    expect(readProjectOgBackground("../../etc/passwd")).toBeUndefined();
  });
});

describe("OgCard", () => {
  const props = { eyebrow: "Case", title: "Título", description: "Resumo." };

  it("keeps the plain dark card when there is no background", () => {
    const { container } = render(<OgCard {...props} />);
    // só a marca
    expect(container.querySelectorAll("img")).toHaveLength(1);
  });

  it("puts the project cover behind the text with a darkening gradient", () => {
    const { container } = render(
      <OgCard {...props} backgroundImage="data:image/jpeg;base64,AAAA" />,
    );
    const images = [...container.querySelectorAll("img")];
    expect(images).toHaveLength(2);
    expect(images[0]).toHaveAttribute("src", "data:image/jpeg;base64,AAAA");
    expect(images[0]).toHaveAttribute("alt", "");
    expect(container.innerHTML).toContain("linear-gradient");
  });
});