import { FC } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeHighlight from 'rehype-highlight';
import rehypeRaw from 'rehype-raw';
import rehypeSanitize from 'rehype-sanitize';
import 'highlight.js/styles/github-dark.css';

import { defaultSchema } from 'hast-util-sanitize';
import { cn } from '../../lib/cn';

const schema = {
    ...defaultSchema,
    attributes: {
        ...defaultSchema.attributes,
        div: [
            ...(defaultSchema.attributes?.div || []),
            ['style'], // разрешаем атрибут style на div
        ],
    },
};

interface MarkdownPreviewProps {
    content: string;
    className?: string;
}

const MarkdownPreview: FC<MarkdownPreviewProps> = ({
    content,
    className = '',
}) => {
    return (
        <div className={cn('flex-1 bg-[#161b22] rounded-lg p-6', className)}>
            <div className="prose prose-invert max-w-none h-full overflow-auto pr-4 medium-scrollbar">
                <ReactMarkdown
                    remarkPlugins={[remarkGfm]}
                    rehypePlugins={[
                        rehypeRaw,
                        [rehypeSanitize, schema],
                        rehypeHighlight,
                    ]}
                >
                    {content}
                </ReactMarkdown>
            </div>
        </div>
    );
};

export default MarkdownPreview;