import { lazy, Suspense } from 'react';
import { UploadPlaceholder } from '@/components/loading/PageSkeletons';
import React from 'react';

const UppyPhotoUpload = lazy(() => 
  import('./UppyPhotoUpload').then(module => ({ default: module.UppyPhotoUpload }))
);

export interface UppyPhotoUploadLazyProps {
  onUploadComplete?: (urls: string[]) => void;
  onFilesSelected?: (files: File[]) => void;
  onUploadStart?: () => void;
  onUploadError?: (error: Error) => void;
  maxFiles?: number;
  maxSizeMB?: number;
  allowedFileTypes?: string[];
  metadata?: Record<string, any>;
  variant?: string;
  className?: string;
  children?: React.ReactNode;
  disabled?: boolean;
  showPreview?: boolean;
  size?: 'default' | 'compact' | 'large';
  enableDragDrop?: boolean;
  showUploadModal?: boolean;
  deferUpload?: boolean;
}

export function UppyPhotoUploadLazy(props: UppyPhotoUploadLazyProps) {
  return (
    <Suspense fallback={<UploadPlaceholder />}>
      <UppyPhotoUpload {...props} />
    </Suspense>
  );
}