import { describe, it, expect } from 'vitest'
import { exportFrame } from '@/lib/wysiwyg/export'
import type { Frame } from '@/lib/wysiwyg/schema'

function baseFrame(bg = '#111111'): Frame {
  return {
    id: 'f', width: 320, height: 200, background: bg,
    layers: [{ id: 'l1', name: 'Base', visible: true, locked: false, objects: [] }],
  }
}

describe('wysiwyg export - theme switching tokens', () => {
  it('emits light/dark token presets', () => {
    const out = exportFrame(baseFrame('#202020'))
    expect(out.css).toMatch(/:root\s*{[^}]*--bg:/)
    expect(out.css).toMatch(/\[data-theme="light"\]\s*{[^}]*--bg:/)
    expect(out.css).toMatch(/\[data-theme="dark"\]\s*{[^}]*--bg:/)
  })
  it('frame uses var(--bg), so theme can override background', () => {
    const out = exportFrame(baseFrame('#333333'))
    expect(out.css).toMatch(/\.frame\s*{[^}]*background:var\(--bg\)/)
  })
})