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

import { Badge } from "../Badge";

describe("Badge", () => {
  it("renders children text", () => {
    render(<Badge variant="success">Свободен</Badge>);
    expect(screen.getByText("Свободен")).toBeInTheDocument();
  });

  it("applies success token background via inline style", () => {
    const { container } = render(<Badge variant="success">OK</Badge>);
    const span = container.querySelector("span");
    expect(span?.style.background).toBe("var(--success-soft)");
    expect(span?.style.color).toBe("var(--success)");
  });

  it("applies danger token for danger variant", () => {
    const { container } = render(<Badge variant="danger">Риск</Badge>);
    const span = container.querySelector("span");
    expect(span?.style.background).toBe("var(--danger-soft)");
    expect(span?.style.color).toBe("var(--danger)");
  });

  it("renders icon slot when provided", () => {
    render(
      <Badge variant="warning" icon={<span data-testid="icon" />}>
        Внимание
      </Badge>,
    );
    expect(screen.getByTestId("icon")).toBeInTheDocument();
  });

  it("applies sm size with smaller font", () => {
    const { container } = render(
      <Badge variant="neutral" size="sm">
        Нейтрально
      </Badge>,
    );
    const span = container.querySelector("span");
    expect(span?.style.fontSize).toBe("11px");
  });

  it("applies md size by default", () => {
    const { container } = render(<Badge variant="info">Инфо</Badge>);
    const span = container.querySelector("span");
    expect(span?.style.fontSize).toBe("12px");
  });
});
