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

describe('Badge (design-system)', () => {
  it('renders children', () => {
    render(<Badge>Hoạt động</Badge>);
    expect(screen.getByText('Hoạt động')).toBeInTheDocument();
  });

  it('renders as a span', () => {
    render(<Badge data-testid="b">Test</Badge>);
    expect(screen.getByTestId('b').tagName).toBe('SPAN');
  });

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

  it('applies primary variant', () => {
    render(<Badge data-testid="b" variant="primary">Primary</Badge>);
    expect(screen.getByTestId('b')).toHaveClass('bg-primary/10');
  });

  it('applies warning variant', () => {
    render(<Badge data-testid="b" variant="warning">Warning</Badge>);
    expect(screen.getByTestId('b')).toHaveClass('bg-warning/10');
  });

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

  it('applies outline variant', () => {
    render(<Badge data-testid="b" variant="outline">Outline</Badge>);
    expect(screen.getByTestId('b')).toHaveClass('bg-transparent');
  });

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