/*
 * Runtime Web – Unified Serverless Framework for Full-Stack TypeScript Applications
 * Documentation: https://runtimeweb.com/docs/getting-started
 *
 * @template: ai-chat
 */

/**
 * MarkdownContent Component
 *
 * Renders markdown content with proper styling for AI chat responses.
 * Supports GFM (GitHub Flavored Markdown) including tables, code blocks,
 * and other common markdown features.
 *
 * @module components/chat/MarkdownContent
 */

import * as React from 'react';
import Markdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

/**
 * Props for the MarkdownContent component.
 */
export interface MarkdownContentProps {
    /** The markdown content to render */
    content: string;
    /** Additional CSS class name */
    className?: string;
}

/**
 * MarkdownContent renders markdown with proper styling.
 *
 * Features:
 * - GFM support (tables, strikethrough, task lists)
 * - Code block syntax highlighting ready
 * - Proper link handling
 * - Accessible table rendering
 *
 * @param props - Component props
 * @returns React element with rendered markdown
 */
export const MarkdownContent: React.FC<MarkdownContentProps> = ({
    content,
    className = '',
}) => {
    return (
        <div className={`markdown-content ${className}`.trim()}>
            <Markdown
                remarkPlugins={[remarkGfm]}
                components={{
                    // Custom table rendering for better styling
                    table: ({ children }) => (
                        <div className="markdown-content__table-wrapper">
                            <table className="markdown-content__table">{children}</table>
                        </div>
                    ),
                    // Code blocks with language class
                    code: ({ className: codeClassName, children, ...props }) => {
                        const isInline = !codeClassName;
                        if (isInline) {
                            return (
                                <code className="markdown-content__code--inline" {...props}>
                                    {children}
                                </code>
                            );
                        }
                        return (
                            <code className={`markdown-content__code ${codeClassName || ''}`} {...props}>
                                {children}
                            </code>
                        );
                    },
                    // Pre blocks for code
                    pre: ({ children }) => (
                        <pre className="markdown-content__pre">{children}</pre>
                    ),
                    // Links open in new tab
                    a: ({ href, children }) => (
                        <a
                            href={href}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="markdown-content__link"
                        >
                            {children}
                        </a>
                    ),
                }}
            >
                {content}
            </Markdown>
        </div>
    );
};
