import { mockMatchMedia, render, screen } from '../../test-utils';
import { ListItem, type ListItemProps } from '../ListItem';

mockMatchMedia();

const avatars = [
  { imgSrc: 'avatar1.jpg', profileName: 'User 1' },
  { imgSrc: 'avatar2.jpg', profileName: 'User 2' },
];

const renderWithMedia = (media: ListItemProps['media']) =>
  render(<ListItem title="Test Title" media={media} />);

describe('ListItem.AvatarLayout', () => {
  it('applies custom className alongside default class', () => {
    renderWithMedia(
      <ListItem.AvatarLayout
        className="custom-class"
        role="group"
        aria-label="Custom avatar group"
        avatars={avatars}
      />,
    );

    expect(screen.getByRole('group', { name: 'Custom avatar group' })).toHaveClass('custom-class');
  });

  it('renders both avatars', () => {
    renderWithMedia(<ListItem.AvatarLayout avatars={avatars} />);

    const images = screen.getAllByRole('presentation');
    expect(images).toHaveLength(avatars.length);
    expect(images[0]).toHaveAttribute('src', avatars[0].imgSrc);
    expect(images[1]).toHaveAttribute('src', avatars[1].imgSrc);
  });

  it('renders with single avatar', () => {
    renderWithMedia(<ListItem.AvatarLayout avatars={[avatars[0]]} />);
    expect(screen.getByRole('presentation')).toHaveAttribute('src', avatars[0].imgSrc);
  });

  it('handles empty avatars array', () => {
    renderWithMedia(<ListItem.AvatarLayout avatars={[]} />);
    expect(screen.queryByRole('img')).not.toBeInTheDocument();
  });

  it('supports accessibility props', () => {
    renderWithMedia(<ListItem.AvatarLayout aria-label="User avatars" avatars={avatars} />);
    expect(screen.getByLabelText('User avatars')).toBeInTheDocument();
  });

  it('passes through role', () => {
    renderWithMedia(
      <ListItem.AvatarLayout role="group" aria-label="Avatar group" avatars={avatars} />,
    );

    expect(screen.getByRole('group', { name: 'Avatar group' })).toBeInTheDocument();
  });
});