'use client';

import React from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

interface RichTextEditorProps {
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
}

export default function RichTextEditor({ value, onChange, placeholder }: RichTextEditorProps) {
  return (
    <div className="w-full text-black bg-white rounded-2xl border border-gray-300 overflow-hidden focus-within:border-[#FECE00] focus-within:ring-2 focus-within:ring-[#FECE00]/20 transition-all">
      <style>{`
        .ck-editor__editable_inline {
          min-height: 300px;
          padding: 1rem 1.5rem !important;
          border: none !important;
          outline: none !important;
          box-shadow: none !important;
          background: white !important;
        }
        .ck-toolbar {
          border-top: none !important;
          border-left: none !important;
          border-right: none !important;
          border-bottom: 1px solid #e5e7eb !important;
          background-color: #f9fafb !important;
        }
      `}</style>
      <CKEditor
        editor={ClassicEditor as any}
        data={value}
        config={{
          licenseKey: 'GPL',
          placeholder: placeholder || 'Type content here...',
          toolbar: [
            'heading', '|',
            'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', '|',
            'undo', 'redo'
          ]
        }}
        onChange={(event: any, editor: any) => {
          const data = editor.getData();
          onChange(data);
        }}
      />
    </div>
  );
}