import { describe, expect, it } from "vitest";
import { render, screen } from "@testing-library/react";
import { Badge, Button, EmptyState, ErrorState, LoadingState } from "@agy/ui";

describe("design system", () => {
  it("renders a button with its label", () => {
    render(<Button>ورود</Button>);
    expect(screen.getByRole("button", { name: "ورود" })).toBeInTheDocument();
  });

  it("disables the button while loading", () => {
    render(<Button loading>ذخیره</Button>);
    expect(screen.getByRole("button")).toBeDisabled();
  });

  it("announces the loading state to assistive tech", () => {
    render(<LoadingState label="در حال بارگذاری…" />);
    expect(screen.getByRole("status")).toBeInTheDocument();
  });

  it("renders an error state as an alert with a retry action", () => {
    render(<ErrorState message="خطای شبکه" onRetry={() => undefined} />);
    expect(screen.getByRole("alert")).toBeInTheDocument();
    expect(screen.getByRole("button", { name: "تلاش دوباره" })).toBeInTheDocument();
  });

  it("renders an empty state title and description", () => {
    render(<EmptyState title="چیزی نیست" description="توضیح" />);
    expect(screen.getByText("چیزی نیست")).toBeInTheDocument();
    expect(screen.getByText("توضیح")).toBeInTheDocument();
  });

  it("renders a badge", () => {
    render(<Badge tone="success">فعال</Badge>);
    expect(screen.getByText("فعال")).toBeInTheDocument();
  });
});