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

describe('Badge', () => {
  it('renders label text', () => {
    render(
      <ThemeProvider>
        <Badge label="VIEWER" />
      </ThemeProvider>,
    )
    expect(screen.getByText('VIEWER')).toBeInTheDocument()
  })

  it('applies inline hash color when color is auto', () => {
    const { container } = render(
      <ThemeProvider>
        <Badge label="VIEWER" color="auto" />
      </ThemeProvider>,
    )
    const badge = container.firstChild as HTMLElement
    expect(badge.style.backgroundColor).toBeTruthy()
  })

  it('applies semantic color class when specified', () => {
    const { container } = render(
      <ThemeProvider>
        <Badge label="Failed" color="error" />
      </ThemeProvider>,
    )
    expect(container.firstChild).toHaveClass('error')
  })

  it('applies dashed variant class', () => {
    const { container } = render(
      <ThemeProvider>
        <Badge label="inherited" variant="dashed" />
      </ThemeProvider>,
    )
    expect(container.firstChild).toHaveClass('dashed')
  })
})
