import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import React from 'react';
import { MapOverlay } from './map-overlay';
import { MAP_OVERLAY_POSITIONS } from '../map/map-overlay-position';

describe('MapOverlay', () => {
  it('renders its content', () => {
    render(<MapOverlay>Legenda</MapOverlay>);
    expect(screen.getByText('Legenda')).toBeInTheDocument();
  });

  it('positions absolutely on the shared stacking layer', () => {
    const { container } = render(<MapOverlay position="bottom-left">x</MapOverlay>);
    expect(container.firstChild).toHaveClass('absolute');
    expect(container.firstChild).toHaveClass('z-10');
  });

  it('supports all nine anchors with distinct placement', () => {
    const classes = MAP_OVERLAY_POSITIONS.map(position => {
      const { container } = render(<MapOverlay position={position}>x</MapOverlay>);
      return (container.firstChild as HTMLElement).className;
    });

    expect(new Set(classes).size).toBe(MAP_OVERLAY_POSITIONS.length);
  });

  it('lets one overlay be raised above the others', () => {
    const { container } = render(<MapOverlay zIndex={99}>x</MapOverlay>);
    expect(container.firstChild).toHaveStyle({ zIndex: '99' });
  });
});