'use client'

import dynamic from 'next/dynamic'
import { LabSkeleton } from './lab-skeleton'
import { CanvasErrorBoundary } from './canvas-error-boundary'

const CanvasBoard = dynamic(
  () => import('./canvas-board').then((mod) => mod.CanvasBoard),
  { 
    ssr: false, 
    loading: () => <LabSkeleton />
  }
)

interface CanvasWrapperProps {
  canvasId?: string
  name: string
  initialData?: string
}

export function CanvasWrapper(props: CanvasWrapperProps) {
  return (
    <CanvasErrorBoundary>
      <CanvasBoard {...props} />
    </CanvasErrorBoundary>
  )
}