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

const scenarios = [
  { name: 'homepage-en-light-desktop', locale: 'en', theme: 'light', width: 1440, height: 1000 },
  { name: 'homepage-en-dark-mobile', locale: 'en', theme: 'dark', width: 390, height: 844 },
  { name: 'homepage-fr-light-tablet', locale: 'fr', theme: 'light', width: 1024, height: 900 },
  { name: 'homepage-fr-dark-mobile', locale: 'fr', theme: 'dark', width: 390, height: 844 },
  { name: 'homepage-ar-light-desktop', locale: 'ar', theme: 'light', width: 1440, height: 1000 },
  { name: 'homepage-ar-dark-mobile', locale: 'ar', theme: 'dark', width: 390, height: 844 },
  { name: 'homepage-en-light-320', locale: 'en', theme: 'light', width: 320, height: 800 },
] as const;

for (const scenario of scenarios) {
  test(`${scenario.name} baseline`, async ({ page, context }) => {
    test.skip(test.info().project.name !== 'chromium');
    await page.setViewportSize({ width: scenario.width, height: scenario.height });
    await context.addCookies([
      {
        name: 'hpc-theme',
        value: scenario.theme,
        domain: '127.0.0.1',
        path: '/',
        secure: false,
        sameSite: 'Lax',
      },
    ]);
    await page.goto(`/${scenario.locale}`);
    await expect(page).toHaveScreenshot(`${scenario.name}.png`, { fullPage: true });
  });
}