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

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

export interface MarkdownEditorProps {
  value: string;
  onChange: (value: string) => void;
  onSave?: (value: string) => Promise<void>;
  autoSave?: boolean;
  height?: number;
  placeholder?: string;
}

export function MarkdownEditorLazy(props: MarkdownEditorProps): React.JSX.Element {
  return (
    <Suspense fallback={<EditorSkeleton />}>
      <MarkdownEditor {...props} />
    </Suspense>
  );
}