import React from 'react'
import { Canvas } from '@/components/wysiwyg/Canvas'
import type { Frame } from '@/lib/wysiwyg/schema'

function sampleFrame(): Frame {
  return {
    id: 'f-sample',
    width: 600,
    height: 400,
    background: '#ffffff',
    layers: [
      {
        id: 'l1',
        name: 'Base',
        visible: true,
        locked: false,
        objects: [
          { id: 'o1', type: 'image', x: 40, y: 40, width: 100, height: 80, rotate: 0, zIndex: 0, props: { src: 'https://via.placeholder.com/100x80', alt: 'A' } },
          { id: 'o2', type: 'text', x: 200, y: 60, width: 200, height: 40, rotate: 0, zIndex: 1, props: { text: 'WYSIWYG', fontSize: 20, color: '#111111' } },
        ],
      },
    ],
  }
}

export function WysiwygPage() {
  const frame = sampleFrame()
  return (
    <div className="p-6 space-y-4">
      <h1 className="text-xl font-semibold">WYSIWYG Canvas</h1>
      <Canvas frame={frame} />
    </div>
  )
}

export default WysiwygPage