'use client';

import dynamic from 'next/dynamic';
import { useEffect, useState } from 'react';
// Import ReactQuill dynamically to avoid SSR issues
const ReactQuill = dynamic(() => import('react-quill-new'), {
  ssr: false,
  loading: () => <div className="border border-gray-300 h-64 flex items-center justify-center">Loading editor...</div>
});

// Import styles
import 'react-quill-new/dist/quill.snow.css';
//import 'react-quill/dist/quill.snow.css';

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

// Create a client-side only component
const QuillEditor = ({ value, onChange, placeholder }: QuillEditorProps) => {
  // Use state to track if component is mounted (client-side)
  const [mounted, setMounted] = useState(false);

  // Only render the editor on the client
  useEffect(() => {
    setMounted(true);
  }, []);

  // Default toolbar options
  const modules = {
    toolbar: [
      [{ 'header': [1, 2, 3, false] }],
      ['bold', 'italic', 'underline', 'strike'],
      [{ 'list': 'ordered' }, { 'list': 'bullet' }],
      ['link'],
      ['clean']
    ]
  };

  if (!mounted) {
    return <div className="border border-gray-300 h-64 flex items-center justify-center">Loading editor...</div>;
  }

  return (
    <div className="quill-wrapper">
      <ReactQuill
        value={value}
        onChange={onChange}
        modules={modules}
        placeholder={placeholder}
        theme="snow"
      />
    </div>
  );
};

export default QuillEditor;