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

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

  it('renders default variant', () => {
    render(<Badge>Test</Badge>);
    expect(screen.getByText('Test').closest('span')).toHaveClass('bg-gray-100');
  });

  it('renders primary variant', () => {
    render(<Badge variant="primary">Test</Badge>);
    expect(screen.getByText('Test').closest('span')).toHaveClass('bg-brand-100');
  });

  it('renders success variant', () => {
    render(<Badge variant="success">Test</Badge>);
    expect(screen.getByText('Test').closest('span')).toHaveClass('bg-green-100');
  });

  it('renders warning variant', () => {
    render(<Badge variant="warning">Test</Badge>);
    expect(screen.getByText('Test').closest('span')).toHaveClass('bg-amber-100');
  });

  it('renders danger variant', () => {
    render(<Badge variant="danger">Test</Badge>);
    expect(screen.getByText('Test').closest('span')).toHaveClass('bg-red-100');
  });

  it('renders info variant', () => {
    render(<Badge variant="info">Test</Badge>);
    expect(screen.getByText('Test').closest('span')).toHaveClass('bg-blue-100');
  });

  it('applies small size', () => {
    render(<Badge size="sm">Test</Badge>);
    expect(screen.getByText('Test').closest('span')).toHaveClass('text-xs');
  });

  it('applies medium size', () => {
    render(<Badge size="md">Test</Badge>);
    expect(screen.getByText('Test').closest('span')).toHaveClass('text-xs');
  });

  it('applies large size', () => {
    render(<Badge size="lg">Test</Badge>);
    expect(screen.getByText('Test').closest('span')).toHaveClass('text-sm');
  });

  it('applies pill style', () => {
    render(<Badge pill>Test</Badge>);
    expect(screen.getByText('Test').closest('span')).toHaveClass('rounded-full');
  });

  it('applies rounded style by default', () => {
    render(<Badge>Test</Badge>);
    expect(screen.getByText('Test').closest('span')).toHaveClass('rounded');
  });

  it('renders dot indicator', () => {
    const { container } = render(<Badge dot>Test</Badge>);
    const dot = container.querySelector('.rounded-full');
    expect(dot).toBeInTheDocument();
  });

  it('applies custom className', () => {
    render(<Badge className="custom-class">Test</Badge>);
    expect(screen.getByText('Test').closest('span')).toHaveClass('custom-class');
  });
});
