import { describe, it, expect } from 'vitest'
import { render } from '@testing-library/react'
import { DaysBreakdown } from './DaysBreakdown'

describe('DaysBreakdown', () => {
  it('renders empty state when no breakdown provided', () => {
    const { getByTestId } = render(<DaysBreakdown breakdown={[]} />)
    expect(getByTestId('days-breakdown').textContent).toContain('No days recorded yet')
  })

  it('renders table with breakdown data', () => {
    const breakdown = [
      { type: 'vacation', count: 10 },
      { type: 'sick leave', count: 3 },
      { type: 'parental', count: 50 },
    ]
    const { getByTestId } = render(<DaysBreakdown breakdown={breakdown} />)
    const table = getByTestId('days-breakdown')
    expect(table.querySelector('table')).toBeInTheDocument()
    expect(table.textContent).toContain('vacation')
    expect(table.textContent).toContain('10')
  })

  it('renders correct number of rows', () => {
    const breakdown = [
      { type: 'vacation', count: 10 },
      { type: 'sick leave', count: 3 },
      { type: 'parental', count: 50 },
    ]
    const { getByTestId } = render(<DaysBreakdown breakdown={breakdown} />)
    expect(getByTestId('breakdown-row-vacation')).toBeInTheDocument()
    expect(getByTestId('breakdown-row-sick leave')).toBeInTheDocument()
    expect(getByTestId('breakdown-row-parental')).toBeInTheDocument()
  })

  it('displays correct values in table', () => {
    const breakdown = [{ type: 'vacation', count: 25 }]
    const { getByTestId } = render(<DaysBreakdown breakdown={breakdown} />)
    const row = getByTestId('breakdown-row-vacation')
    expect(row.textContent).toContain('vacation')
    expect(row.textContent).toContain('25')
  })

  it('renders table headers', () => {
    const breakdown = [{ type: 'vacation', count: 10 }]
    const { getByTestId } = render(<DaysBreakdown breakdown={breakdown} />)
    const table = getByTestId('days-breakdown').querySelector('table')
    expect(table?.querySelector('thead')).toBeInTheDocument()
  })
})