'use client';

import React from 'react';

interface SimpleMarkdownRendererProps {
    content: string;
}

const SimpleMarkdownRenderer: React.FC<SimpleMarkdownRendererProps> = ({ content }) => {
    // Convert markdown to HTML with basic formatting
    const formatContent = (text: string) => {
        return (
            text
                // Headers
                .replace(
                    /^### (.*$)/gm,
                    '<h3 class="text-xl font-bold mb-3 mt-6 text-gray-900">$1</h3>',
                )
                .replace(
                    /^## (.*$)/gm,
                    '<h2 class="text-2xl font-bold mb-4 mt-8 text-gray-900">$1</h2>',
                )
                .replace(
                    /^# (.*$)/gm,
                    '<h1 class="text-3xl font-bold mb-6 mt-8 text-gray-900">$1</h1>',
                )

                // Bold text
                .replace(
                    /\*\*(.*?)\*\*/g,
                    '<strong class="font-semibold text-gray-900">$1</strong>',
                )

                // Italic text
                .replace(/\*(.*?)\*/g, '<em class="italic">$1</em>')

                // Lists
                .replace(/^\- (.*$)/gm, '<li class="mb-2 ml-4">• $1</li>')

                // Line breaks
                .replace(/\n\n/g, '</p><p class="mb-4 text-gray-700 leading-relaxed">')
                .replace(/\n/g, '<br>')

                // Wrap in paragraphs
                .replace(/^(?!<[h|l])/gm, '<p class="mb-4 text-gray-700 leading-relaxed">')

                // Clean up
                .replace(/<p class="mb-4 text-gray-700 leading-relaxed"><\/p>/g, '')
        );
    };

    return (
        <div
            className="prose prose-lg max-w-none"
            dangerouslySetInnerHTML={{ __html: formatContent(content) }}
        />
    );
};

export default SimpleMarkdownRenderer;