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

// Mock the Map component to verify props passed to it
vi.mock('../map', () => ({
  Map: vi.fn(({ markers, center, zoom }: any) => (
    <div data-testid="mock-map">
      <span data-testid="center">{JSON.stringify(center)}</span>
      <span data-testid="zoom">{zoom}</span>
      <span data-testid="markers-count">{markers.length}</span>
      {markers.length > 0 && <span data-testid="marker-title">{markers[0].title}</span>}
    </div>
  )),
}));

describe('SimpleMap', () => {
  const mockCenter = { lat: 10, lng: 20 };

  it('renders Map with correct props', () => {
    render(<SimpleMap center={mockCenter} zoom={12} markerTitle="Test Marker" />);

    expect(screen.getByTestId('mock-map')).toBeInTheDocument();
    expect(screen.getByTestId('center')).toHaveTextContent(JSON.stringify(mockCenter));
    expect(screen.getByTestId('zoom')).toHaveTextContent('12');
    expect(screen.getByTestId('markers-count')).toHaveTextContent('1');
    expect(screen.getByTestId('marker-title')).toHaveTextContent('Test Marker');
  });

  it('renders without marker when showMarker is false', () => {
    render(<SimpleMap center={mockCenter} showMarker={false} />);

    expect(screen.getByTestId('markers-count')).toHaveTextContent('0');
  });
});