import { describe, it, expect, vi } from 'vitest'
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { Tabs } from './Tabs'

describe('Tabs', () => {
  const tabs = [
    { label: 'All', count: 14, value: 'all' },
    { label: 'Exchanges', count: 8, value: 'exchanges' },
    { label: 'Routes', count: 3, value: 'routes' },
  ]

  it('renders all tab labels', () => {
    render(<Tabs tabs={tabs} active="all" onChange={() => {}} />)
    expect(screen.getByText('All')).toBeInTheDocument()
    expect(screen.getByText('Exchanges')).toBeInTheDocument()
  })

  it('shows count badges', () => {
    render(<Tabs tabs={tabs} active="all" onChange={() => {}} />)
    expect(screen.getByText('14')).toBeInTheDocument()
  })

  it('calls onChange with tab value', async () => {
    const onChange = vi.fn()
    const user = userEvent.setup()
    render(<Tabs tabs={tabs} active="all" onChange={onChange} />)
    await user.click(screen.getByText('Routes'))
    expect(onChange).toHaveBeenCalledWith('routes')
  })
})
