import { render, screen } from '@testing-library/react'
import { VersDetailsPanel } from '@/components/bible/verse-details-panel'

const mockVerse = {
  id: 'v1',
  verseNum: 1,
  text: 'In the beginning...',
  bookId: 1,
  chapter: 1
}

describe('VersDetailsPanel', () => {
  it('renders when open with verse data', () => {
    render(
      <VersDetailsPanel
        verse={mockVerse}
        isOpen={true}
        onClose={() => {}}
        isBookmarked={false}
        onToggleBookmark={() => {}}
        onAddNote={() => {}}
      />
    )
    expect(screen.getByText(/In the beginning/)).toBeInTheDocument()
  })

  it('does not render when closed', () => {
    const { container } = render(
      <VersDetailsPanel
        verse={mockVerse}
        isOpen={false}
        onClose={() => {}}
        isBookmarked={false}
        onToggleBookmark={() => {}}
        onAddNote={() => {}}
      />
    )
    expect(container.firstChild).toBeNull()
  })
})