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

for (const scenario of [
  { locale: 'en', theme: 'light', width: 1440, height: 1200 },
  { locale: 'fr', theme: 'dark', width: 1024, height: 1200 },
  { locale: 'ar', theme: 'dark', width: 390, height: 1200 },
] as const) {
  test(`${scenario.locale}-${scenario.theme} component matrix`, async ({ page }) => {
    test.skip(test.info().project.name !== 'chromium', 'Canonical visual baselines use Chromium.');
    await page.addInitScript(
      (theme) => localStorage.setItem('hpc.theme.preference', theme),
      scenario.theme,
    );
    await page.setViewportSize({ width: scenario.width, height: scenario.height });
    await page.goto(`/${scenario.locale}/component-lab`);
    await expect(page).toHaveScreenshot(
      `component-system-${scenario.locale}-${scenario.theme}-${scenario.width}.png`,
      { fullPage: true },
    );
  });
}