import React, { useRef, useEffect } from 'react';
import TextareaAutosize from 'react-textarea-autosize';

interface EditorProps {
  content: string;
  onChange: (content: string) => void;
  disabled?: boolean;
}

const Editor: React.FC<EditorProps> = ({ content, onChange, disabled }) => {
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  useEffect(() => {
    if (textareaRef.current && textareaRef.current.value !== content) {
      textareaRef.current.value = content;
    }
  }, [content]);

  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    onChange(e.target.value);
  };

  return (
    <div className="h-1/2 border-r border-custom p-4">
      <textarea
        ref={textareaRef}
        value={content}
        onChange={handleChange}
        disabled={disabled}
        placeholder="Start writing your markdown here..."
        className="w-full h-full bg-transparent resize-none outline-none font-mono text-sm leading-relaxed"
        spellCheck={false}
      />
    </div>
  );
};

export default Editor;
