import { defineConfig } from "@playwright/test";

const viewports = [
  { name: "desktop-1920", width: 1920, height: 1080 },
  { name: "desktop-1366", width: 1366, height: 768 },
  { name: "tablet-1024", width: 1024, height: 768 },
  { name: "tablet-768", width: 768, height: 1024 },
  { name: "mobile-390", width: 390, height: 844 }
];

export default defineConfig({
  testDir: "./tests/e2e",
  outputDir: "./test-results",
  fullyParallel: false,
  retries: 0,
  reporter: [["list"]],
  use: {
    baseURL: "http://127.0.0.1:47173",
    colorScheme: "light",
    reducedMotion: "reduce",
    trace: "retain-on-failure"
  },
  webServer: {
    command: "VITE_DISABLE_DEVTOOLS=1 npm run dev -- --host 127.0.0.1 --port 47173 --strictPort",
    url: "http://127.0.0.1:47173",
    reuseExistingServer: false,
    timeout: 120_000
  },
  projects: viewports.map(({ name, width, height }) => ({
    name,
    use: { viewport: { width, height } }
  }))
});