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

describe('ChatHeader', () => {
  it('returns null when no header provided', () => {
    const { container } = render(<ChatHeader />)
    expect(container.firstChild).toBeNull()
  })

  it('renders string header as CardTitle', () => {
    render(<ChatHeader header="Test Title" />)
    expect(screen.getByText('Test Title')).toBeInTheDocument()
  })

  it('renders custom React node header', () => {
    render(<ChatHeader header={<span data-testid="custom">Custom Header</span>} />)
    expect(screen.getByTestId('custom')).toBeInTheDocument()
    expect(screen.getByText('Custom Header')).toBeInTheDocument()
  })

  it('renders string header inside px-6 container', () => {
    render(<ChatHeader header="Title" />)
    const title = screen.getByText('Title')
    expect(title.closest('.px-6')).not.toBeNull()
  })

  it('renders custom header inside px-4 container', () => {
    render(<ChatHeader header={<div>Custom</div>} />)
    const custom = screen.getByText('Custom')
    expect(custom.closest('.px-4')).not.toBeNull()
  })
})