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

test.describe("Locale Switcher", () => {
  test("locale switcher is visible in header", async ({ page }) => {
    await page.goto("/");
    await expect(page.locator('[data-testid="header"]')).toBeVisible();
    // Locale switcher should be present
    const localeSwitcher = page.locator('[data-testid="locale-switcher"]');
    // If not using that testid, check for a select or button in the header
    const headerInteractives = page.locator('[data-testid="header"] select, [data-testid="header"] button');
    const count = await headerInteractives.count();
    expect(count).toBeGreaterThan(0);
  });

  test("i18n page locale-select changes output text", async ({ page }) => {
    await page.goto("/i18n");
    await expect(page.locator('[data-testid="output"]')).toBeVisible();

    // Get initial text in English
    const initialText = await page.locator('[data-testid="output"]').textContent();
    expect(initialText).toBeTruthy();

    // Switch to French
    await page.locator('[data-testid="locale-select"]').selectOption("fr");

    // Output should now contain French text
    const frenchText = await page.locator('[data-testid="output"]').textContent();
    expect(frenchText).toContain("article");
  });

  test("i18n page locale-select changes to Japanese", async ({ page }) => {
    await page.goto("/i18n");
    await page.locator('[data-testid="locale-select"]').selectOption("ja");
    const text = await page.locator('[data-testid="output"]').textContent();
    // Japanese output contains Japanese characters or specific words
    expect(text).toBeTruthy();
    expect(text).toContain("アイテム");
  });
});