import { render, screen } from "@testing-library/react"
import { describe, it, expect } from "vitest"
import { Button } from "../button"
import { Badge } from "../badge"
import { Card, CardHeader, CardTitle, CardContent } from "../card"

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

    describe("Badge", () => {
        it("renders correctly", () => {
            render(<Badge>New</Badge>)
            expect(screen.getByText("New")).toBeDefined()
        })
    })

    describe("Card", () => {
        it("renders with title and content", () => {
            render(
                <Card>
                    <CardHeader>
                        <CardTitle>Test Title</CardTitle>
                    </CardHeader>
                    <CardContent>Test Content</CardContent>
                </Card>
            )
            expect(screen.getByText("Test Title")).toBeDefined()
            expect(screen.getByText("Test Content")).toBeDefined()
        })
    })
})