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

const MOBIUS_CLASS_NAME = "mobius";
const LOGO_CLASS_NAME = "mobius-logo";

describe("Logo", () => {
  it("should render without errors", () => {
    render(<Logo />);
  });

  describe("classes", () => {
    it("should render with Mobius classes", () => {
      const { container } = render(<Logo />);

      expect(container.firstChild).toHaveClass(MOBIUS_CLASS_NAME);
      expect(container.firstChild).toHaveClass(LOGO_CLASS_NAME);
    });

    it("should pass custom class name", () => {
      const customClassName = "custom-class-name";

      const { container } = render(<Logo className={customClassName} />);

      expect(container.firstChild).toHaveClass(customClassName);
    });
  });

  describe("semantic HTML and accessibility", () => {
    it("renders an <svg> element", () => {
      const { container } = render(<Logo />);
      expect(container.firstChild?.nodeName).toBe("svg");
    });

    it("has a viewBox attribute for proper scaling", () => {
      const { container } = render(<Logo />);
      expect(container.firstChild).toHaveAttribute("viewBox", "0 0 144 37");
    });

    it("applies custom width and height", () => {
      const { container } = render(<Logo width="200" height="50" />);
      expect(container.firstChild).toHaveAttribute("width", "200");
      expect(container.firstChild).toHaveAttribute("height", "50");
    });

    // Note: Logo does not set role="img", aria-label, or <title> by default.
    // Screen readers may not announce this SVG meaningfully. Consider adding
    // role="img" and aria-label="Simply Business" for better accessibility.
    // The component's type interface (LogoProps) also does not accept role or
    // aria-label, so consumers cannot pass these props without a type error.
    it("does not set an accessible label by default", () => {
      const { container } = render(<Logo />);
      expect(container.firstChild).not.toHaveAttribute("role");
      expect(container.firstChild).not.toHaveAttribute("aria-label");
    });
  });

  it("forwards ref", () => {
    const ref = createRef<SVGSVGElement>();
    render(<Logo ref={ref} />);
    expect(ref.current).toBeInstanceOf(SVGSVGElement);
  });
});
