import { render, screen } from "@testing-library/react";
import { describe, expect, test } from "vitest";
import { Button } from "../src/button";

describe("Button variants", () => {
  test("renders with default variant", () => {
    render(<Button variant="default">Default Button</Button>);
    const button = screen.getByRole("button");
    expect(button).toHaveClass("bg-blue-500", "hover:bg-blue-500/90");
  });

  test("renders with link variant", () => {
    render(<Button variant="link">Link Button</Button>);
    const button = screen.getByRole("button");
    expect(button).toHaveClass("underline-offset-4", "hover:underline");
  });
});

describe("Button sizes", () => {
  test("renders with default size", () => {
    render(<Button size="default">Default Size</Button>);
    const button = screen.getByRole("button");
    expect(button).toHaveClass("px-4", "py-2");
  });

  test("renders with icon size", () => {
    render(<Button size="icon">Icon</Button>);
    const button = screen.getByRole("button");
    expect(button).toHaveClass("p-2");
  });
});

describe("Button with data-slot", () => {
  test("has correct data-slot attribute", () => {
    render(<Button>Test Button</Button>);
    const button = screen.getByRole("button");
    expect(button).toHaveAttribute("data-slot", "button");
  });
});

describe("Button with custom className", () => {
  test("merges custom className", () => {
    render(<Button className="custom-class">Custom</Button>);
    const button = screen.getByRole("button");
    expect(button).toHaveClass("custom-class");
  });
});

describe("Button with children", () => {
  test("renders children correctly", () => {
    render(<Button>Click Me</Button>);
    expect(screen.getByText("Click Me")).toBeInTheDocument();
  });

  test("renders multiple children", () => {
    render(
      <Button>
        <span>Icon</span>
        <span>Text</span>
      </Button>,
    );
    expect(screen.getByText("Icon")).toBeInTheDocument();
    expect(screen.getByText("Text")).toBeInTheDocument();
  });
});