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

for (const scenario of [
  { density:'compact', width:1440, height:900 },
  { density:'comfortable', width:1440, height:900 },
  { density:'touch', width:390, height:844 },
] as const) {
  test(`KBX catalog ${scenario.density} visual baseline`, async ({ page }) => {
    await page.setViewportSize({ width:scenario.width, height:scenario.height })
    await page.goto(`/internal/kbx/catalog?density=${scenario.density}`)
    await expect(page.getByRole('heading',{name:'KBX 컴포넌트 카탈로그'})).toBeVisible()
    await expect(page).toHaveScreenshot(`kbx-catalog-${scenario.density}.png`, { fullPage:true })
  })
}