import React from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw';

interface MarkdownPreviewProps {
  markdown: string;
}

const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({ markdown }) => {
  return (
    <div className="p-8 max-w-4xl mx-auto">
      <div className="prose dark:prose-invert prose-lg max-w-none">
        <ReactMarkdown
          remarkPlugins={[remarkGfm]}
          rehypePlugins={[rehypeRaw]}
          components={{
            table: props => (
              <div className="overflow-x-auto my-8">
                <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700" {...props} />
              </div>
            ),
            thead: props => (
              <thead className="bg-gray-50 dark:bg-gray-800" {...props} />
            ),
            th: props => (
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider font-poppins" {...props} />
            ),
            td: props => (
              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100" {...props} />
            ),
            tr: props => (
              <tr className="even:bg-gray-50 dark:even:bg-gray-800/50" {...props} />
            ),
            h2: props => (
              <h2 className="text-3xl font-bold mt-8 mb-4 text-gray-900 dark:text-white font-poppins" {...props} />
            ),
            h3: props => (
              <h3 className="text-2xl font-semibold mt-6 mb-3 text-gray-800 dark:text-gray-100 font-poppins" {...props} />
            ),
            ul: props => (
              <ul className="list-disc list-outside pl-6 space-y-2 my-4" {...props} />
            ),
            li: props => (
              <li className="text-gray-700 dark:text-gray-300 leading-relaxed" {...props} />
            ),
            p: props => (
              <p className="text-gray-700 dark:text-gray-300 leading-relaxed my-4 whitespace-pre-wrap" {...props} />
            ),
            strong: props => (
              <strong className="font-semibold text-gray-900 dark:text-white" {...props} />
            ),
          }}
        >
          {markdown}
        </ReactMarkdown>
      </div>
    </div>
  );
};

export default MarkdownPreview;