import React from "react";
import { Text } from "./index";

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

describe("Text", () => {
  it("renders children as a p element by default", () => {
    render(<Text>Hello</Text>);
    const el = screen.getByText("Hello");
    expect(el.tagName).toBe("P");
  });

  it("renders as a custom element when 'as' prop is provided", () => {
    render(<Text as="h1">Heading</Text>);
    const el = screen.getByText("Heading");
    expect(el.tagName).toBe("H1");
  });

  it("renders as a span", () => {
    render(<Text as="span">Inline</Text>);
    expect(screen.getByText("Inline").tagName).toBe("SPAN");
  });

  it("applies className", () => {
    render(<Text className="text-bold">Styled</Text>);
    expect(screen.getByText("Styled")).toHaveClass("text-bold");
  });

  it("uses empty string as default className", () => {
    render(<Text>No class</Text>);
    expect(screen.getByText("No class")).toHaveAttribute("class", "");
  });

  it("applies inline style", () => {
    render(<Text style={{ color: "red" }}>Red</Text>);
    expect(screen.getByText("Red").style.color).toBe("red");
  });

  it("passes additional HTML attributes", () => {
    render(
      <Text data-testid="custom-text" id="my-text">
        Attr
      </Text>
    );
    const el = screen.getByTestId("custom-text");
    expect(el).toHaveAttribute("id", "my-text");
  });

  it("forwards ref to the element", () => {
    const ref = React.createRef<HTMLElement>();
    render(<Text ref={ref}>Ref test</Text>);
    expect(ref.current).toBeInstanceOf(HTMLParagraphElement);
    expect(ref.current?.textContent).toBe("Ref test");
  });

  it("renders without children", () => {
    const { container } = render(<Text />);
    expect(container.querySelector("p")).toBeInTheDocument();
    expect(container.querySelector("p")?.textContent).toBe("");
  });

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