import { render, screen, fireEvent } from "@testing-library/react"
import { Button } from "./button"
import { Input } from "./input"
import { Badge } from "./badge"
import { Label } from "./label"

describe("UI Components", () => {
    describe("Button", () => {
        it("renders button with text", () => {
            render(<Button>Click me</Button>)
            expect(screen.getByRole("button", { name: /click me/i })).toBeInTheDocument()
        })

        it("handles click events", () => {
            const onClick = jest.fn()
            render(<Button onClick={onClick}>Click me</Button>)
            fireEvent.click(screen.getByRole("button"))
            expect(onClick).toHaveBeenCalled()
        })

        it("applies variant classes", () => {
            render(<Button variant="destructive">Delete</Button>)
            const btn = screen.getByRole("button")
            expect(btn.className).toContain("bg-destructive")
        })
    })

    describe("Input", () => {
        it("renders input", () => {
            render(<Input placeholder="Enter text" />)
            expect(screen.getByPlaceholderText("Enter text")).toBeInTheDocument()
        })

        it("handles change events", () => {
            const onChange = jest.fn()
            render(<Input onChange={onChange} />)
            const input = screen.getByRole("textbox") // Input type text role is textbox
            fireEvent.change(input, { target: { value: "test" } })
            expect(onChange).toHaveBeenCalled()
        })
    })

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

        it("applies variant classes", () => {
            render(<Badge variant="secondary">Secondary</Badge>)
            expect(screen.getByText("Secondary").className).toContain("bg-secondary")
        })
    })

    describe("Label", () => {
        it("renders label text", () => {
            render(<Label>Username</Label>)
            expect(screen.getByText("Username")).toBeInTheDocument()
        })
    })
})
