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

test.describe("Responsive Design", () => {
  test("shows sidebar on desktop", async ({ browser }) => {
    const context = await browser.newContext({
      viewport: { width: 1280, height: 720 },
    });
    const page = await context.newPage();
    await page.goto("/demo/app/residences");
    const sidebar = page.locator('nav[aria-label="Main navigation"]').first();
    await expect(sidebar).toBeVisible();
    await context.close();
  });

  test("shows bottom nav on mobile", async ({ browser }) => {
    const context = await browser.newContext({
      ...devices["iPhone 14"],
    });
    const page = await context.newPage();
    await page.goto("/demo/app/residences");
    // Bottom nav should be visible on mobile
    const bottomNav = page.locator('nav[aria-label="Main navigation"]').last();
    await expect(bottomNav).toBeVisible();
    await context.close();
  });

  test("kanban board scrolls horizontally on mobile", async ({ browser }) => {
    const context = await browser.newContext({
      ...devices["iPhone 14"],
    });
    const page = await context.newPage();
    await page.goto("/demo/app/tasks");
    // The kanban container should have overflow-x-auto
    const kanban = page.locator(".snap-x").first();
    if (await kanban.isVisible()) {
      await expect(kanban).toHaveCSS("overflow-x", "auto");
    }
    await context.close();
  });
});