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

describe("Badge", () => {
  it("renders success variant with label", () => {
    render(<Badge variant="success">GIS Verified</Badge>);
    expect(screen.getByText("GIS Verified")).toBeInTheDocument();
  });

  it("applies success styles", () => {
    render(<Badge variant="success">Verified</Badge>);
    const badge = screen.getByText("Verified");
    expect(badge.className).toContain("bg-success-bg");
    expect(badge.className).toContain("text-brand-green");
  });

  it("applies warning styles", () => {
    render(<Badge variant="warning">Pending SLA</Badge>);
    const badge = screen.getByText("Pending SLA");
    expect(badge.className).toContain("bg-amber-50");
    expect(badge.className).toContain("text-amber-700");
  });

  it("applies brand styles", () => {
    render(<Badge variant="brand">Best Match</Badge>);
    const badge = screen.getByText("Best Match");
    expect(badge.className).toContain("bg-brand-green/10");
  });

  it("hides icon when icon=false", () => {
    const { container } = render(<Badge icon={false}>No Icon</Badge>);
    expect(container.querySelector("svg")).toBeNull();
  });
});