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

import Badge from './Badge'

describe('Badge component', () => {
  it('renders children correctly', () => {
    render(<Badge color='lavender'>Test Badge</Badge>)
    expect(screen.getByText('Test Badge')).toBeInTheDocument()
  })

  it('applies the correct background color variable', () => {
    render(<Badge color='dark-green'>Color Test</Badge>)
    const badge = screen.getByText('Color Test')

    expect(badge).toHaveStyle({
      '--badge-background-color': 'var(--dark-green)',
    })
  })
})