import { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

function ArticleEditor ({ article, onSave, onCancel }) {
    const [title, setTitle] = useState(article.title);
    const [content, setContent] = useState(article.content);

    const handleSave = () => {
        onSave({
            ka_number: article.ka_number,
            title: title,
            content: content
        });
    };

    return (
        <div className='article-editor'>
            <div className='editor-header'>
                <h2>Editing: {article.ka_number}</h2>
            </div>

            <div className='editor-form'>
                <p>
                    <label>Title:  </label>
                    <input
                        type='text'
                        value={title}
                        onChange={(e) => setTitle(e.target.value)}
                    />
                </p>

                <p><label>Content:</label></p>
                <ReactQuill
                    value={content}
                    onChange={setContent}
                />
                
                <div className='editor-buttons'>
                    <button onClick={handleSave}>Save</button>
                    <button onClick={onCancel}>Cancel</button>
                </div>
            </div>
        </div>
    );
}

export default ArticleEditor;