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

const builderUrl = '/en/builder'

test('Preview viewport toggle sets aria-pressed and container width', async ({ page }) => {
  await page.goto(builderUrl)

  const desktopBtn = page.getByRole('button', { name: 'Desktop' })
  const mobileBtn = page.getByRole('button', { name: 'Mobile' })
  const container = page.getByTestId('preview-container')

  // default: desktop
  await expect(desktopBtn).toHaveAttribute('aria-pressed', 'true')
  await expect(mobileBtn).toHaveAttribute('aria-pressed', 'false')
  await expect(container).toHaveClass(/w-\[768px\]/)

  // switch to mobile
  await mobileBtn.click()
  await expect(desktopBtn).toHaveAttribute('aria-pressed', 'false')
  await expect(mobileBtn).toHaveAttribute('aria-pressed', 'true')
  await expect(container).toHaveClass(/w-\[375px\]/)
})