import { expect, test } from '@playwright/test';

for (const scenario of [
  { locale: 'en', theme: 'light' },
  { locale: 'en', theme: 'dark' },
  { locale: 'fr', theme: 'light' },
  { locale: 'ar', theme: 'light' },
  { locale: 'ar', theme: 'dark' },
] as const) {
  test(`${scenario.locale} ${scenario.theme} demo initial and validation states`, async ({
    page,
  }) => {
    test.skip(test.info().project.name !== 'chromium', 'Canonical visual baselines use Chromium.');
    await page.emulateMedia({ colorScheme: scenario.theme });
    await page.goto(`/${scenario.locale}`);
    await page.locator('main button[data-demo-source="hero"]').click();
    const dialog = page.getByRole('dialog');
    await expect(dialog).toHaveScreenshot(`demo-${scenario.locale}-${scenario.theme}-initial.png`);
    await dialog.locator('button[type="submit"]').click();
    await expect(dialog).toHaveScreenshot(
      `demo-${scenario.locale}-${scenario.theme}-validation.png`,
    );
  });
}