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

describe('PillBadge', () => {
  it('renders the label text with default primary color tokens', () => {
    render(<PillBadge>AI Adoption Platform</PillBadge>);

    const badge = screen.getByText('AI Adoption Platform');
    expect(badge).toBeInTheDocument();
    expect(badge).toHaveClass('border-primary');
    expect(badge).toHaveClass('bg-primary/5');
    expect(badge).toHaveClass('text-primary');
  });

  it('renders an icon when provided', () => {
    render(
      <PillBadge icon={<svg data-testid="pill-icon" />}>With icon</PillBadge>
    );

    expect(screen.getByTestId('pill-icon')).toBeInTheDocument();
  });

  it('omits the icon wrapper when no icon is provided', () => {
    const { container } = render(<PillBadge>No icon</PillBadge>);

    expect(container.querySelector('[aria-hidden="true"]')).not.toBeInTheDocument();
  });

  it('applies color-specific classes for a non-default color', () => {
    render(<PillBadge color="success">Compliant</PillBadge>);

    const badge = screen.getByText('Compliant');
    expect(badge).toHaveClass('border-success');
    expect(badge).toHaveClass('bg-success/5');
    expect(badge).toHaveClass('text-success');
  });

  it('forwards additional span props and className', () => {
    render(
      <PillBadge className="custom-pill" data-testid="pill">
        Custom
      </PillBadge>
    );

    const badge = screen.getByTestId('pill');
    expect(badge).toHaveClass('custom-pill');
  });
});