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

// next-intl mocked to echo keys; locale = en so the clock formats with ASCII digits.
jest.mock('next-intl', () => ({
  useTranslations: () => (key: string) => key,
  useLocale: () => 'en',
}));

import EvvStatusBanner from './EvvStatusBanner';

function renderBanner(match: boolean | null) {
  return render(
    <ThemeProvider>
      <EvvStatusBanner checkInAtIso="2026-07-10T09:02:00.000Z" addressMatch={match} />
    </ThemeProvider>,
  );
}

describe('<EvvStatusBanner/> component', () => {
  it('shows the in-range confirmation when the address matched', () => {
    renderBanner(true);
    expect(screen.getByText('evv_banner_in_range')).toBeInTheDocument();
  });

  it('shows the advisory out-of-range variant (warning tone, not error) when the address mismatched', () => {
    const { container } = renderBanner(false);
    expect(screen.getByText('evv_banner_out_of_range')).toBeInTheDocument();
    // Advisory: the warning tone, never the error tone.
    const banner = container.querySelector('[data-evv-match="false"]') as HTMLElement;
    expect(banner).toHaveAttribute('data-evv-tone', 'warning');
  });

  it('shows the neutral no-GPS variant when the position was unavailable', () => {
    renderBanner(null);
    expect(screen.getByText('evv_banner_no_gps')).toBeInTheDocument();
  });
});
