import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import { Card } from './Card'

describe('Card', () => {
  it('renders children', () => {
    render(<Card>Hello world</Card>)
    expect(screen.getByText('Hello world')).toBeInTheDocument()
  })

  it('renders title when provided', () => {
    render(<Card title="Status">Content</Card>)
    expect(screen.getByText('Status')).toBeInTheDocument()
  })

  it('does not render title header when title is omitted', () => {
    const { container } = render(<Card>Content</Card>)
    expect(container.querySelector('h3')).toBeNull()
  })

  it('wraps children in body div when title is provided', () => {
    render(<Card title="Status"><span>Content</span></Card>)
    const content = screen.getByText('Content')
    expect(content.parentElement).toHaveClass('body')
  })

  it('renders with accent and title together', () => {
    const { container } = render(
      <Card accent="success" title="Health">Content</Card>,
    )
    const card = container.firstChild as HTMLElement
    expect(card).toHaveClass('accent-success')
    expect(screen.getByText('Health')).toBeInTheDocument()
    expect(screen.getByText('Content')).toBeInTheDocument()
  })

  it('accepts className prop', () => {
    const { container } = render(<Card className="custom">Content</Card>)
    const card = container.firstChild as HTMLElement
    expect(card).toHaveClass('custom')
  })

  it('renders children directly when no title (no wrapper div)', () => {
    const { container } = render(<Card><span>Direct child</span></Card>)
    const card = container.firstChild as HTMLElement
    const span = screen.getByText('Direct child')
    expect(span.parentElement).toBe(card)
  })
})
