'use client';

import dynamic from 'next/dynamic';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import { ClassicEditor } from 'ckeditor5';

// Dynamically import CKEditor to avoid SSR issues
const DynamicCKEditor = dynamic(() => Promise.resolve(CKEditor), {
  ssr: false,
  loading: () => <div>Loading editor...</div>
});

interface EditorProps {
  data?: string;
  onChange?: (data: string) => void;
  config?: any;
  disabled?: boolean;
}

export default function Editor({ data = '', onChange, config = {}, disabled = false }: EditorProps) {
  return (
    <div className="ckeditor-wrapper">
      <DynamicCKEditor
        editor={ClassicEditor}
        data={data}
        onChange={(event, editor) => {
          const data = editor.getData();
          onChange?.(data);
        }}
        config={{
          toolbar: [
            'heading', '|',
            'bold', 'italic', 'link', '|',
            'bulletedList', 'numberedList', '|',
            'outdent', 'indent', '|',
            'blockQuote', 'insertTable', '|',
            'undo', 'redo'
          ],
          ...config
        }}
        disabled={disabled}
      />
    </div>
  );
}