/**
 * KRA - Rich Text Editor Component
 * Rich text editing with toolbar
 */
import React, { useRef, useEffect } from 'react';
import { Input } from 'antd';

const { TextArea } = Input;

interface RichTextEditorProps {
  value?: string;
  onChange?: (value: string) => void;
  placeholder?: string;
  height?: number;
  disabled?: boolean;
  className?: string;
  style?: React.CSSProperties;
}

/**
 * Simple rich text editor using textarea
 * For full rich text support, integrate with a library like TinyMCE, Quill, or Draft.js
 */
const RichTextEditor: React.FC<RichTextEditorProps> = ({
  value,
  onChange,
  placeholder = '请输入内容...',
  height = 300,
  disabled = false,
  className,
  style,
}) => {
  return (
    <div className={className} style={style}>
      <TextArea
        value={value}
        onChange={(e) => onChange?.(e.target.value)}
        placeholder={placeholder}
        disabled={disabled}
        style={{ height, resize: 'vertical' }}
        showCount
      />
    </div>
  );
};

export default RichTextEditor;
