import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css'; // Import Quill themes

const EmailComposer = () => {
  const [content, setContent] = useState('');

  const templates = {
    'Template 1': 'This is an example of template 1',
    'Template 2': 'This is an example of template 2',
    'Empty': '',
  };

  const handleChange = (value) => {
    setContent(value);
  };

  const handleTemplateChange = (e) => {
    setContent(templates[e.target.value]);
  };

  return (
    <div>
      <select onChange={handleTemplateChange}>
        {Object.keys(templates).map((template, index) => (
          <option value={template} key={index}>
            {template}
          </option>
        ))}
      </select>

      <ReactQuill
        theme='snow' // using snow theme
        value={content}
        onChange={handleChange}
      />
    </div>
  );
};
export default EmailComposer;
