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

import Pill, { pillColorList } from './Pill'

describe('Pill', () => {
  it('renders with correct color', () => {
    render(<Pill color='blue' number={1000} />)
    const pill = screen.getByTestId('pill-component')
    expect(pill).toHaveAttribute('data-color', 'blue')
  })

  it('renders with all available colors', () => {
    pillColorList.forEach((color) => {
      const { unmount } = render(<Pill color={color} number={1000} />)
      const pill = screen.getByTestId('pill-component')
      expect(pill).toHaveAttribute('data-color', color)
      unmount()
    })
  })

  it('shows loading state', () => {
    render(<Pill color='blue' number={1000} loading={true} />)
    expect(screen.getByTestId('pill-loading')).toBeInTheDocument()
    expect(screen.queryByTestId('pill-number')).not.toBeInTheDocument()
  })

  it('shows number when not loading', () => {
    render(<Pill color='blue' number={1000} loading={false} />)
    expect(screen.getByTestId('pill-number')).toBeInTheDocument()
    expect(screen.queryByTestId('pill-loading')).not.toBeInTheDocument()
  })

  describe('number formatting', () => {
    it('formats small numbers', () => {
      render(<Pill color='blue' number={123} />)
      expect(screen.getByTestId('pill-number')).toHaveTextContent('123')
    })

    it('formats numbers with thousands separator', () => {
      render(<Pill color='blue' number={1234} />)
      expect(screen.getByTestId('pill-number')).toHaveTextContent('1,234')
    })

    it('formats large numbers with suffix', () => {
      render(<Pill color='blue' number={1234567} />)
      expect(screen.getByTestId('pill-number')).toHaveTextContent('1.23M')
    })

    it('formats decimal numbers', () => {
      render(<Pill color='blue' number={1234.5678} />)
      expect(screen.getByTestId('pill-number')).toHaveTextContent('1,234.57')
    })

    it('formats negative numbers', () => {
      render(<Pill color='blue' number={-1234} />)
      expect(screen.getByTestId('pill-number')).toHaveTextContent('-1,234')
    })
  })
})