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

describe('MapNotice', () => {
  it('renders its content as a status', () => {
    render(<MapNotice>Dados demonstrativos</MapNotice>);
    expect(screen.getByRole('status')).toHaveTextContent('Dados demonstrativos');
  });

  it('distinguishes synthetic data from a warning', () => {
    const { container: synthetic } = render(
      <MapNotice variant="synthetic">Dados demonstrativos</MapNotice>
    );
    const { container: warning } = render(
      <MapNotice variant="warning">Cobertura parcial</MapNotice>
    );

    // Synthetic is a provenance label, not a problem: dashed neutral, not amber.
    expect(synthetic.firstChild).toHaveClass('border-dashed');
    expect(warning.firstChild).not.toHaveClass('border-dashed');
  });

  it('positions itself absolutely only in the overlay layout', () => {
    const { container: overlay } = render(<MapNotice position="top-left">Aviso</MapNotice>);
    expect(overlay.firstChild).toHaveClass('absolute');

    const { container: inline } = render(<MapNotice layout="inline">Aviso</MapNotice>);
    expect(inline.firstChild).not.toHaveClass('absolute');
  });
});