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

const names = ['Alice Johnson', 'Bob Smith', 'Carol White', 'Dave Brown', 'Eve Davis']

function renderGroup(props: React.ComponentProps<typeof AvatarGroup>) {
  return render(
    <ThemeProvider>
      <AvatarGroup {...props} />
    </ThemeProvider>
  )
}

describe('AvatarGroup', () => {
  it('renders max avatars (default 3) when count exceeds max', () => {
    renderGroup({ names })
    expect(screen.getByLabelText('Alice Johnson')).toBeInTheDocument()
    expect(screen.getByLabelText('Bob Smith')).toBeInTheDocument()
    expect(screen.getByLabelText('Carol White')).toBeInTheDocument()
    expect(screen.queryByLabelText('Dave Brown')).not.toBeInTheDocument()
    expect(screen.queryByLabelText('Eve Davis')).not.toBeInTheDocument()
  })

  it('shows +N overflow indicator for remaining avatars', () => {
    renderGroup({ names })
    // 5 names, max 3 => +2 overflow
    expect(screen.getByText('+2')).toBeInTheDocument()
  })

  it('renders all avatars and no overflow when count <= max', () => {
    renderGroup({ names: ['Alice Johnson', 'Bob Smith'], max: 3 })
    expect(screen.getByLabelText('Alice Johnson')).toBeInTheDocument()
    expect(screen.getByLabelText('Bob Smith')).toBeInTheDocument()
    expect(screen.queryByText(/^\+/)).not.toBeInTheDocument()
  })

  it('respects a custom max prop', () => {
    renderGroup({ names, max: 2 })
    expect(screen.getByLabelText('Alice Johnson')).toBeInTheDocument()
    expect(screen.getByLabelText('Bob Smith')).toBeInTheDocument()
    expect(screen.queryByLabelText('Carol White')).not.toBeInTheDocument()
    // 5 names, max 2 => +3 overflow
    expect(screen.getByText('+3')).toBeInTheDocument()
  })

  it('accepts a size prop without errors', () => {
    const { container } = renderGroup({ names, size: 'lg' })
    expect(container.firstChild).toBeInTheDocument()
  })

  it('renders all avatars when count exactly equals max', () => {
    renderGroup({ names: ['Alice Johnson', 'Bob Smith', 'Carol White'], max: 3 })
    expect(screen.getByLabelText('Alice Johnson')).toBeInTheDocument()
    expect(screen.getByLabelText('Bob Smith')).toBeInTheDocument()
    expect(screen.getByLabelText('Carol White')).toBeInTheDocument()
    expect(screen.queryByText(/^\+/)).not.toBeInTheDocument()
  })
})
