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

describe("Button component", () => {
  it("renders with a pointer cursor", () => {
    render(<Button>Click me</Button>)
    const button = screen.getByRole("button", { name: /click me/i })
    expect(button).toHaveClass("cursor-pointer")
  })

  it("renders different variants with a pointer cursor", () => {
    const { rerender } = render(<Button variant="outline">Outline</Button>)
    let button = screen.getByRole("button", { name: /outline/i })
    expect(button).toHaveClass("cursor-pointer")

    rerender(<Button variant="destructive">Destructive</Button>)
    button = screen.getByRole("button", { name: /destructive/i })
    expect(button).toHaveClass("cursor-pointer")
  })

  it("renders with a default cursor when disabled", () => {
    render(<Button disabled>Disabled Button</Button>)
    const button = screen.getByRole("button", { name: /disabled button/i })
    expect(button).toBeDisabled()
    expect(button).toHaveClass("disabled:pointer-events-none")
    expect(button).toHaveClass("disabled:cursor-default")
  })
})