"use client";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

const toolbarConfig = {
    items: [
        'heading', '|', 'bold', 'italic', 'link',
        'bulletedList', 'numberedList', '|',
        'blockQuote', 'imageUpload', 'insertTable', 'mediaEmbed', '|',
        'undo', 'redo'
    ],
    shouldNotGroupWhenFull: true
};

interface Props {
    data: string;
    onChange: (data: string) => void;
}

export default function CKEditorWrapper({ data, onChange }: Props) {
    return (
        <CKEditor
            editor={ClassicEditor as any}
            data={data}
            onChange={(_, editor) => onChange(editor.getData())}
            config={{
                toolbar: toolbarConfig,
                image: {
                    toolbar: ['imageTextAlternative', 'imageStyle:full', 'imageStyle:side'],
                    upload: { types: ['jpeg', 'png', 'gif', 'bmp', 'webp', 'tiff'] }
                },
                table: {
                    contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells']
                }
            }}
        />
    );
}