import { render, screen } from '@testing-library/react'
import '@testing-library/jest-dom'
import React from 'react'
import BuilderClientPage from '@/components/BuilderClientPage'
import I18nProvider from '@/components/I18nProvider'
import en from '@/messages/en.json'

describe('Preview viewport toggle ARIA regression', () => {
  it('Desktop/Mobile buttons expose stable ARIA attributes', () => {
    render(
      <I18nProvider locale="en" messages={en as unknown as Record<string, string>}>
        <BuilderClientPage />
      </I18nProvider>
    )

    const desktop = screen.getByRole('button', { name: 'Desktop' })
    const mobile = screen.getByRole('button', { name: 'Mobile' })

    // describedby shared help
    expect(desktop).toHaveAttribute('aria-describedby', 'preview-toggle-help')
    expect(mobile).toHaveAttribute('aria-describedby', 'preview-toggle-help')

    // controls preview container
    expect(desktop).toHaveAttribute('aria-controls', 'preview-container')
    expect(mobile).toHaveAttribute('aria-controls', 'preview-container')

    // default pressed state: Desktop true, Mobile false
    expect(desktop).toHaveAttribute('aria-pressed', 'true')
    expect(mobile).toHaveAttribute('aria-pressed', 'false')
  })
})