// src/components/CommentEditor.jsx
import React, { useState } from "react";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css"; // Core styling
import "./CommentEditor.css"; // Custom styles

const modules = {
  toolbar: [
    [{ header: [1, 2, false] }],
    ["bold", "italic", "underline"],
    [{ list: "ordered" }, { list: "bullet" }],
    ["link"],
    ["clean"],
  ],
};

const formats = [
  "header",
  "bold",
  "italic",
  "underline",
  "list",
  "bullet",
  "link",
];

const CommentEditor = () => {
  const [value, setValue] = useState("");

  const handleSubmit = () => {
    // Submit or handle content
  };

  return (
    <div className="comment-editor">
      <ReactQuill
        theme="snow"
        value={value}
        onChange={setValue}
        modules={modules}
        formats={formats}
        placeholder="Add a comment..."
      />
      <div className="editor-footer">
        <button className="btn btn-sm btn-primary" onClick={handleSubmit}>
          Add Comment
        </button>
      </div>
    </div>
  );
};

export default CommentEditor;