import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

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

export function Editor({ content, onChange, placeholder = '# Start writing\n\nYour markdown here...' }: EditorProps) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 h-[calc(100vh-160px)] min-h-[300px]">
      <div className="border-r border-gray-200 dark:border-gray-700">
        <textarea
          value={content}
          onChange={(e) => onChange(e.target.value)}
          placeholder={placeholder}
          className="w-full h-full p-4 resize-none outline-none bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-mono text-sm leading-relaxed"
          spellCheck={false}
        />
      </div>
      <div className="p-4 overflow-auto bg-gray-50 dark:bg-gray-800">
        <ReactMarkdown
          remarkPlugins={[remarkGfm]}
          className="prose dark:prose-invert max-w-none"
        >
          {content || placeholder}
        </ReactMarkdown>
      </div>
    </div>
  );
}