import { render, screen, fireEvent } from '@testing-library/react'
import { HighlightsTab } from '@/components/bible/highlights-tab'
import { BibleVerse } from '@/types'

describe('HighlightsTab', () => {
  const mockVerse: BibleVerse = {
    id: 'v-1',
    verseNum: 1,
    text: 'In the beginning God created the heavens and the earth'
  }

  it('should render highlight button when verse not highlighted', () => {
    render(
      <HighlightsTab
        verse={mockVerse}
        isHighlighted={false}
        currentColor={null}
        onToggleHighlight={() => {}}
        onColorChange={() => {}}
      />
    )

    expect(screen.getByText(/Highlight/i)).toBeInTheDocument()
  })

  it('should render color picker when verse is highlighted', () => {
    render(
      <HighlightsTab
        verse={mockVerse}
        isHighlighted={true}
        currentColor="yellow"
        onToggleHighlight={() => {}}
        onColorChange={() => {}}
      />
    )

    expect(screen.getByText(/Remove highlight/i)).toBeInTheDocument()
  })

  it('should call onColorChange when color is selected', () => {
    const onColorChange = jest.fn()

    render(
      <HighlightsTab
        verse={mockVerse}
        isHighlighted={true}
        currentColor="yellow"
        onToggleHighlight={() => {}}
        onColorChange={onColorChange}
      />
    )

    const blueButton = screen.getByTestId('color-blue')
    fireEvent.click(blueButton)

    expect(onColorChange).toHaveBeenCalledWith('blue')
  })
})