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

describe('Badge', () => {
  it('renders with text content', () => {
    render(<Badge>Active</Badge>);
    expect(screen.getByText('Active')).toBeInTheDocument();
  });

  it('applies default variant styles', () => {
    render(<Badge data-testid="badge">Default</Badge>);
    expect(screen.getByTestId('badge')).toHaveClass('bg-primary');
  });

  it('applies destructive variant', () => {
    render(<Badge data-testid="badge" variant="destructive">Error</Badge>);
    expect(screen.getByTestId('badge')).toHaveClass('bg-destructive');
  });

  it('applies success variant', () => {
    render(<Badge data-testid="badge" variant="success">OK</Badge>);
    expect(screen.getByTestId('badge')).toHaveClass('bg-green-100');
  });

  it('applies warning variant', () => {
    render(<Badge data-testid="badge" variant="warning">Warn</Badge>);
    expect(screen.getByTestId('badge')).toHaveClass('bg-yellow-100');
  });

  it('applies custom className', () => {
    render(<Badge data-testid="badge" className="extra">Custom</Badge>);
    expect(screen.getByTestId('badge')).toHaveClass('extra');
  });
});