'use client';

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

interface EditorPreviewProps {
  content: string;
}

export function EditorPreview({ content }: EditorPreviewProps) {
  // If content is empty, show placeholder
  if (!content.trim()) {
    return (
      <div className="article-content editor-preview-content editor-preview-empty">
        <p>Start typing to see the preview...</p>
      </div>
    );
  }

  return (
    <div className="article-content editor-preview-content">
      <ReactMarkdown remarkPlugins={[remarkGfm]}>
        {content}
      </ReactMarkdown>
    </div>
  );
}