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

const logos = [
  { src: '/logos/acme.svg', alt: 'Acme Corp' },
  { src: '/logos/globex.svg', alt: 'Globex' },
  { src: '/logos/initech.svg', alt: 'Initech' },
];

describe('LogoCloud', () => {
  it('renders an image for each logo with the correct alt text', () => {
    render(<LogoCloud logos={logos} />);

    logos.forEach(logo => {
      const img = screen.getByAltText(logo.alt);
      expect(img).toBeInTheDocument();
      expect(img).toHaveAttribute('src', logo.src);
    });
  });

  it('renders the title when provided', () => {
    render(<LogoCloud title="Trusted by leading teams" logos={logos} />);

    expect(screen.getByText('Trusted by leading teams')).toBeInTheDocument();
  });

  it('omits the title when not provided', () => {
    render(<LogoCloud logos={logos} />);

    expect(screen.queryByText('Trusted by leading teams')).not.toBeInTheDocument();
  });

  it('renders exactly as many images as logos provided', () => {
    render(<LogoCloud logos={logos} />);

    expect(screen.getAllByRole('img')).toHaveLength(3);
  });

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

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