import { render, screen } from '@testing-library/react'
import { SyncStatusIndicator } from '@/components/bible/sync-status-indicator'

describe('SyncStatusIndicator', () => {
  it('should show synced state', () => {
    render(<SyncStatusIndicator status="synced" />)
    expect(screen.getByTestId('sync-status-synced')).toBeInTheDocument()
  })

  it('should show syncing state with spinner', () => {
    render(<SyncStatusIndicator status="syncing" />)
    expect(screen.getByTestId('sync-status-syncing')).toBeInTheDocument()
  })

  it('should show error state', () => {
    render(<SyncStatusIndicator status="error" errorMessage="Network error" />)
    expect(screen.getByTestId('sync-status-error')).toBeInTheDocument()
    expect(screen.getByText('Network error')).toBeInTheDocument()
  })

  it('should show pending count', () => {
    render(<SyncStatusIndicator status="pending" pendingCount={3} />)
    expect(screen.getByText('3 pending')).toBeInTheDocument()
  })
})