import { describe, expect, it, vi } from 'vitest'

import { fireEvent, renderWithProviders, screen } from '../../../test/utils'

import CarouselNav from './CarouselNav'
import { VIEWER_NAV_CLASS } from './viewerChromeClasses'

describe('CarouselNav', () => {
  it('uses default labels and independent handlers', () => {
    const onPrev = vi.fn()
    const onNext = vi.fn()
    renderWithProviders(<CarouselNav onPrev={onPrev} onNext={onNext} />)

    const prev = screen.getByRole('button', { name: 'Previous' })
    const next = screen.getByRole('button', { name: 'Next' })
    expect(prev).toHaveClass(VIEWER_NAV_CLASS, 'left-4')
    expect(next).toHaveClass(VIEWER_NAV_CLASS, 'right-4')
    fireEvent.click(prev)
    fireEvent.click(next)
    expect(onPrev).toHaveBeenCalledOnce()
    expect(onNext).toHaveBeenCalledOnce()
  })

  it('supports custom accessible labels', () => {
    renderWithProviders(
      <CarouselNav
        onPrev={vi.fn()}
        onNext={vi.fn()}
        prevLabel="Previous image"
        nextLabel="Next image"
      />
    )
    expect(screen.getByRole('button', { name: 'Previous image' })).toBeVisible()
    expect(screen.getByRole('button', { name: 'Next image' })).toBeVisible()
  })
})