import { describe, it, expect, vi } from "vitest";
import { renderWithProviders } from "@repo/core-testing/react";
import { screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { Button } from "./button";

describe("Button", () => {
  it("renders children inside a button", () => {
    renderWithProviders(<Button>Click me</Button>);
    expect(screen.getByRole("button", { name: "Click me" })).toBeInTheDocument();
  });

  it("calls onClick when activated", async () => {
    const handleClick = vi.fn();
    renderWithProviders(<Button onClick={handleClick}>Go</Button>);
    await userEvent.click(screen.getByRole("button", { name: "Go" }));
    expect(handleClick).toHaveBeenCalledOnce();
  });

  it("applies the destructive variant class", () => {
    renderWithProviders(<Button variant="destructive">X</Button>);
    expect(screen.getByRole("button")).toHaveClass(/destructive/);
  });

  it("applies the lg size class", () => {
    renderWithProviders(<Button size="lg">X</Button>);
    expect(screen.getByRole("button")).toHaveClass(/h-11/);
  });

  it("disabled prop sets the attribute and prevents click handler", async () => {
    const handleClick = vi.fn();
    renderWithProviders(
      <Button disabled onClick={handleClick}>
        X
      </Button>,
    );
    const button = screen.getByRole("button");
    expect(button).toBeDisabled();
    await userEvent.click(button);
    expect(handleClick).not.toHaveBeenCalled();
  });
});