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

const badges = [
  { icon: <svg data-testid="icon-soc2" />, label: 'SOC 2 Type II', description: 'Audited annually' },
  { icon: <svg data-testid="icon-gdpr" />, label: 'GDPR' },
  { icon: <svg data-testid="icon-wcag" />, label: 'WCAG 2.1 AA', description: 'Accessibility compliant' },
];

describe('ComplianceBadgeRow', () => {
  it('renders a label for each badge', () => {
    render(<ComplianceBadgeRow badges={badges} />);

    expect(screen.getByText('SOC 2 Type II')).toBeInTheDocument();
    expect(screen.getByText('GDPR')).toBeInTheDocument();
    expect(screen.getByText('WCAG 2.1 AA')).toBeInTheDocument();
  });

  it('renders each badge icon', () => {
    render(<ComplianceBadgeRow badges={badges} />);

    expect(screen.getByTestId('icon-soc2')).toBeInTheDocument();
    expect(screen.getByTestId('icon-gdpr')).toBeInTheDocument();
    expect(screen.getByTestId('icon-wcag')).toBeInTheDocument();
  });

  it('renders the description only for badges that provide one', () => {
    render(<ComplianceBadgeRow badges={badges} />);

    expect(screen.getByText('Audited annually')).toBeInTheDocument();
    expect(screen.getByText('Accessibility compliant')).toBeInTheDocument();
    // GDPR badge has no description text of its own.
    expect(screen.queryByText('GDPR')?.parentElement?.textContent).toBe('GDPR');
  });

  it('renders an empty grid when given no badges', () => {
    const { container } = render(<ComplianceBadgeRow badges={[]} />);

    expect(container.querySelector('div')?.children).toHaveLength(0);
  });

  it('applies a custom className to the wrapper', () => {
    const { container } = render(<ComplianceBadgeRow badges={badges} className="custom-badges" />);

    expect(container.firstChild).toHaveClass('custom-badges');
  });
});