import { describe, it, expect } from "vitest";
import { render, screen } from "@testing-library/react";
import { Badge } from "./badge";

describe("Badge", () => {
  it("renders children content", () => {
    render(<Badge>Easy</Badge>);
    expect(screen.getByText("Easy")).toBeInTheDocument();
  });

  it("applies default variant styles", () => {
    render(<Badge>Test</Badge>);
    const badge = screen.getByText("Test");
    expect(badge).toHaveClass("rounded-full", "text-xs", "font-medium");
  });

  it("applies outline variant styles", () => {
    render(<Badge variant="outline">Test</Badge>);
    const badge = screen.getByText("Test");
    expect(badge).toHaveClass("border");
  });

  it("applies custom className", () => {
    render(<Badge className="custom-class">Test</Badge>);
    const badge = screen.getByText("Test");
    expect(badge).toHaveClass("custom-class");
  });

  it("supports aria-label for accessibility", () => {
    render(<Badge aria-label="Easy difficulty">Easy</Badge>);
    const badge = screen.getByText("Easy");
    expect(badge).toHaveAttribute("aria-label", "Easy difficulty");
  });
});
