import { render, screen } from "@testing-library/react";
import { Logo } from "./Logo";

describe("Logo", () => {
  it("shows the text cutout with the same alt text and a decorative inline mark", () => {
    const { container } = render(<Logo />);

    const text = screen.getByRole("img", { name: "Evandro.dev.br" });
    expect(text.getAttribute("src")).toContain("wordmark-text-dark.webp");
    expect(text).toHaveAttribute("width", "1600");
    expect(text).toHaveAttribute("height", "330");

    const mark = container.querySelector("svg");
    expect(mark).toHaveAttribute("aria-hidden", "true");
    expect(mark?.querySelectorAll(".logo-bloco")).toHaveLength(4);
    expect(screen.getAllByRole("img")).toHaveLength(1);
  });

  it("keeps the caller's className and loading", () => {
    const { container } = render(
      <Logo theme="light" loading="eager" className="w-40 sm:w-44" />,
    );

    expect(container.firstElementChild).toHaveClass("w-40", "sm:w-44");
    const text = screen.getByRole("img", { name: "Evandro.dev.br" });
    expect(text.getAttribute("src")).toContain("wordmark-text-light.webp");
    expect(text).toHaveAttribute("loading", "eager");
    expect(container.querySelector("svg path")).toHaveAttribute(
      "fill",
      "#00090b",
    );
  });
});