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

for (const theme of ['light', 'dark'] as const) {
  test(`renders correctly in ${theme} mode`, async ({ page }) => {
    await page.goto('/');
    await setTheme(page, theme);
    await expect(page.locator('h1').first()).toBeVisible();

    const dataTheme = await page.evaluate(() => document.documentElement.dataset.theme);
    expect(dataTheme).toBe(theme);

    const hasClass = await page.evaluate(
      (t) => document.documentElement.classList.contains('dark') === (t === 'dark'),
      theme,
    );
    expect(hasClass).toBe(true);
  });
}

test('theme defaults to system preference on first load', async ({ page }) => {
  await page.addInitScript(() => localStorage.removeItem('theme'));
  await page.emulateMedia({ colorScheme: 'dark' });
  await page.goto('/');
  const dark = await page.evaluate(() =>
    document.documentElement.classList.contains('dark'),
  );
  expect(dark).toBe(true);
});

test('Source Serif 4 is the display font on the h1', async ({ page }) => {
  await page.goto('/');
  const fontFamily = await page.locator('main h1').evaluate((el) => getComputedStyle(el).fontFamily);
  expect(fontFamily.toLowerCase()).toContain('source serif');
});

test('Inter Tight is the body font', async ({ page }) => {
  await page.goto('/');
  const fontFamily = await page.evaluate(() => getComputedStyle(document.body).fontFamily);
  expect(fontFamily.toLowerCase()).toContain('inter tight');
});
