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

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

  it('applies default variant classes', () => {
    const { container } = render(<Badge>Default</Badge>);
    const badge = container.firstChild as HTMLElement;
    expect(badge).toHaveClass('bg-muted');
  });

  it('applies primary variant classes', () => {
    const { container } = render(<Badge variant="primary">Primary</Badge>);
    const badge = container.firstChild as HTMLElement;
    expect(badge).toHaveClass('bg-primary/10');
  });

  it('applies accent variant classes', () => {
    const { container } = render(<Badge variant="accent">Accent</Badge>);
    const badge = container.firstChild as HTMLElement;
    expect(badge).toHaveClass('bg-accent/10');
  });

  it('applies warning variant classes', () => {
    const { container } = render(<Badge variant="warning">Warning</Badge>);
    const badge = container.firstChild as HTMLElement;
    expect(badge).toHaveClass('bg-warning/10');
  });

  it('applies destructive variant classes', () => {
    const { container } = render(<Badge variant="destructive">Destructive</Badge>);
    const badge = container.firstChild as HTMLElement;
    expect(badge).toHaveClass('bg-destructive/10');
  });

  it('applies outline variant classes', () => {
    const { container } = render(<Badge variant="outline">Outline</Badge>);
    const badge = container.firstChild as HTMLElement;
    expect(badge).toHaveClass('bg-transparent');
  });

  it('merges custom className', () => {
    const { container } = render(<Badge className="my-custom">X</Badge>);
    expect((container.firstChild as HTMLElement)).toHaveClass('my-custom');
  });
});