import { describe, expect, it } from 'vitest'
import { renderToStaticMarkup } from 'react-dom/server'
import { createElement } from 'react'
import Greeting from '../src/islands/Greeting'
import Switcher from '../src/islands/Switcher'

describe('language switcher hydration guards', () => {
  it('server-renders the greeting switcher inert until hydration attaches handlers', () => {
    const html = renderToStaticMarkup(createElement(Greeting, { locale: 'he' }))

    expect(html).toContain('data-hydrated="false"')
    expect(html).toMatch(/data-testid="lang-he"[^>]*disabled=""|disabled=""[^>]*data-testid="lang-he"/)
    expect(html).toMatch(/data-testid="lang-en"[^>]*disabled=""|disabled=""[^>]*data-testid="lang-en"/)
  })

  it('server-renders the cross-island switcher inert until hydration attaches handlers', () => {
    const html = renderToStaticMarkup(createElement(Switcher, { locale: 'he' }))

    expect(html).toContain('data-hydrated="false"')
    expect(html).toMatch(/data-testid="multi-lang-he"[^>]*disabled=""|disabled=""[^>]*data-testid="multi-lang-he"/)
    expect(html).toMatch(/data-testid="multi-lang-en"[^>]*disabled=""|disabled=""[^>]*data-testid="multi-lang-en"/)
  })
})