import { describe, it, expect } from 'vitest'
import { exportPage } from '@/lib/exporter/html'
import type { ExportOptions } from '@/lib/exporter/html'
import type { Page } from '@/lib/schema/page'

const basePage: Page = {
  title: 'Img Test',
  locale: 'en',
  theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
  sections: [
    { type: 'hero', props: { heading: 'Hero', subheading: '', imageUrl: 'https://example.com/hero.jpg' } },
  ],
  form: {
    actionUrl: '',
    fields: [],
    spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 },
  },
  analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
  seo: { title: 'T', description: 'D' },
}

describe('image responsive/export options', () => {
  it('applies fetchpriority when provided', () => {
    const options: ExportOptions = { imageLoading: 'eager', imageDecoding: 'async', imageFetchPriority: 'high' }
    const { html } = exportPage(basePage, options)
    expect(html).toMatch(/<img[^>]*fetchpriority="high"/)
  })

  it('applies srcset and sizes when provided', () => {
    const options: ExportOptions = {
      imageSrcset: 'https://example.com/hero.jpg 1x, https://example.com/hero@2x.jpg 2x',
      imageSizes: '(max-width: 640px) 100vw, 600px',
    }
    const { html } = exportPage(basePage, options)
    expect(html).toMatch(/<img[^>]*srcset="https:\/\/example.com\/hero.jpg 1x, https:\/\/example.com\/hero@2x.jpg 2x"/)
    expect(html).toMatch(/<img[^>]*sizes="\(max-width: 640px\) 100vw, 600px"/)
  })
})