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

jest.mock('next/link', () => {
  return ({children, href, ...props}: {children: React.ReactNode; href: string; [key: string]: unknown}) => (
    <a href={href} {...props}>{children}</a>
  );
});

jest.mock('next/dynamic', () => {
  return () => {
    const MockMap = () => <div data-testid="leaflet-map">Map</div>;
    MockMap.displayName = 'MockMap';
    return MockMap;
  };
});

describe('MapSection', () => {
  it('shouldRenderTitleSubtitleAndCta', () => {
    render(<MapSection locale="fr" />);
    expect(screen.getByText('map_title')).toBeInTheDocument();
    expect(screen.getByText('map_subtitle')).toBeInTheDocument();
    expect(screen.getByText('map_see_map')).toBeInTheDocument();
  });

  it('shouldRenderNearbyEventsWithColoredDots', () => {
    const {container} = render(<MapSection locale="fr" />);
    expect(screen.getByText('map_event1_title')).toBeInTheDocument();
    expect(screen.getByText('map_event2_title')).toBeInTheDocument();
    expect(screen.getByText('map_event3_title')).toBeInTheDocument();
    expect(container.querySelectorAll('.tk-mapsec__dot').length).toBe(3);
  });

  it('shouldRenderTheLeafletMap', () => {
    render(<MapSection locale="fr" />);
    expect(screen.getByTestId('leaflet-map')).toBeInTheDocument();
  });

  it('shouldNotRenderHardcodedFrenchMarkerTitles', () => {
    const {container} = render(<MapSection locale="fr" />);
    const html = container.innerHTML;
    expect(html).not.toContain('Fest-noz - 22 fév 2026');
    expect(html).not.toContain('Concert - 23 fév 2026');
  });
});