import React from 'react';
import {render, screen} from '@testing-library/react';

jest.mock('next-intl', () => ({
  useTranslations: () => (key: string) => key,
}));
jest.mock('next/link', () => ({
  __esModule: true,
  default: ({children, href}: {children: React.ReactNode; href: string}) => <a href={href}>{children}</a>,
}));

import AnimateursGallery from '../AnimateursGallery';

const animateurs = [
  {aenId: 2025, aenLibelle: 'BAROU Sylvain', photoUrl: 'https://media.tamm-kreiz.bzh/barou.jpg'},
  {aenId: 3000, aenLibelle: 'LE BOUR Yann', photoUrl: null},
];

describe('AnimateursGallery', () => {
  it('shouldShowEachAnimateurWithPhotoAndLinkToTheArtistePage', () => {
    render(<AnimateursGallery animateurs={animateurs} locale="fr" />);

    expect(screen.getByTestId('animateurs-gallery')).toHaveTextContent('animateurs_title');
    expect(screen.getByRole('img', {name: 'BAROU Sylvain'})).toHaveAttribute('src', 'https://media.tamm-kreiz.bzh/barou.jpg');
    expect(screen.getByRole('link', {name: /BAROU Sylvain/})).toHaveAttribute('href', '/fr/personne/2025/barou-sylvain');
    expect(screen.getByRole('link', {name: /LE BOUR Yann/})).toHaveAttribute('href', '/fr/personne/3000/le-bour-yann');
    expect(screen.queryByRole('img', {name: 'LE BOUR Yann'})).not.toBeInTheDocument();
  });

  it('shouldRenderNothingWithoutAnimateur', () => {
    const {container} = render(<AnimateursGallery animateurs={[]} locale="fr" />);

    expect(container).toBeEmptyDOMElement();
  });

  it('shouldAcceptACustomTitleAndPerItemLinks', () => {
    render(<AnimateursGallery animateurs={[{aenId: 12, aenLibelle: 'Bagad Kemper', photoUrl: null, href: '/fr/groupes/5'}]} locale="fr" titleKey="programmes_title" />);

    expect(screen.getByTestId('animateurs-gallery')).toHaveTextContent('programmes_title');
    expect(screen.getByRole('link', {name: /Bagad Kemper/})).toHaveAttribute('href', '/fr/groupes/5');
  });
});