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

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

  it('renders with default variant', () => {
    render(<Badge>Standard</Badge>);
    const badge = screen.getByText('Standard');
    expect(badge.className).toContain('bg-secondary-100');
  });

  it('renders with success variant', () => {
    render(<Badge variant="success">OK</Badge>);
    expect(screen.getByText('OK').className).toContain('bg-success-100');
  });

  it('renders with danger variant', () => {
    render(<Badge variant="danger">Fehler</Badge>);
    expect(screen.getByText('Fehler').className).toContain('bg-danger-100');
  });

  it('renders dot indicator when dot=true', () => {
    const { container } = render(<Badge dot>aktiv</Badge>);
    const dot = container.querySelector('span > span');
    expect(dot).toBeInTheDocument();
  });
});
