import { Spinner } from "./index";

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

describe("Spinner", () => {
  it("renders with role status", () => {
    render(<Spinner />);
    expect(screen.getByRole("status")).toBeInTheDocument();
  });

  it("renders a screen-reader-only loading text", () => {
    render(<Spinner />);
    expect(screen.getByText("Loading...")).toBeInTheDocument();
  });

  it("applies medium size class by default", () => {
    const { container } = render(<Spinner />);
    const svg = container.querySelector("svg");
    const classes = svg?.getAttribute("class") || "";
    expect(classes).toContain("w-6");
    expect(classes).toContain("h-6");
  });

  it("applies small size class", () => {
    const { container } = render(<Spinner size="small" />);
    const svg = container.querySelector("svg");
    const classes = svg?.getAttribute("class") || "";
    expect(classes).toContain("w-4");
    expect(classes).toContain("h-4");
  });

  it("applies large size class", () => {
    const { container } = render(<Spinner size="large" />);
    const svg = container.querySelector("svg");
    const classes = svg?.getAttribute("class") || "";
    expect(classes).toContain("w-8");
    expect(classes).toContain("h-8");
  });

  it("applies xlarge size class", () => {
    const { container } = render(<Spinner size="xlarge" />);
    const svg = container.querySelector("svg");
    const classes = svg?.getAttribute("class") || "";
    expect(classes).toContain("w-12");
    expect(classes).toContain("h-12");
  });

  it("uses white as default color", () => {
    const { container } = render(<Spinner />);
    const svg = container.querySelector("svg");
    expect(svg).toHaveAttribute("fill", "#fff");
  });

  it("uses custom color when provided", () => {
    const { container } = render(<Spinner color="#ff0000" />);
    const svg = container.querySelector("svg");
    expect(svg).toHaveAttribute("fill", "#ff0000");
  });

  it("applies custom className to the svg", () => {
    const { container } = render(<Spinner className="custom-spinner" />);
    const svg = container.querySelector("svg");
    const classes = svg?.getAttribute("class") || "";
    expect(classes).toContain("custom-spinner");
  });

  it("svg has aria-hidden true", () => {
    const { container } = render(<Spinner />);
    const svg = container.querySelector("svg");
    expect(svg).toHaveAttribute("aria-hidden", "true");
  });

  it("has the correct displayName", () => {
    expect(Spinner.displayName).toBe("Spinner");
  });
});