import { useEffect, useRef } from 'react';
import Link from 'next/link';

function RichTextWithLinks({ htmlContent }) {
  const contentRef = useRef(null);

  useEffect(() => {
    if (contentRef.current) {
      const links = contentRef.current.querySelectorAll('a[href^="/"]');
      links.forEach(link => {
        const href = link.getAttribute('href');
        const text = link.textContent;
        
        const nextLink = document.createElement('span');
        nextLink.innerHTML = `<Link href="${href}"><a>${text}</a></Link>`;
        
        link.replaceWith(nextLink);
      });
    }
  }, [htmlContent]);

  return (
    <div 
      ref={contentRef}
      dangerouslySetInnerHTML={{ __html: htmlContent }}
    />
  );
}

import parse from 'html-react-parser';
import Link from 'next/link';

function RichTextWithLinks({ htmlContent }) {
  const options = {
    replace: (domNode) => {
      if (domNode.name === 'a' && domNode.attribs.href?.startsWith('/')) {
        return (
          <Link href={domNode.attribs.href} passHref>
            <a {...domNode.attribs}>{domNode.children}</a>
          </Link>
        );
      }
    }
  };

  return <div>{parse(htmlContent, options)}</div>;
}

import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import rehypeStringify from 'rehype-stringify';
import rehypeReact from 'rehype-react';
import Link from 'next/link';

function MarkdownWithLinks({ markdown }) {
  const result = unified()
    .use(remarkParse)
    .use(remarkRehype)
    .use(rehypeReact, {
      createElement: React.createElement,
      components: {
        a: ({ href, children }) => {
          if (href.startsWith('/')) {
            return (
              <Link href={href} passHref>
                <a>{children}</a>
              </Link>
            );
          }
          return <a href={href}>{children}</a>;
        }
      }
    })
    .processSync(markdown).result;

  return <div>{result}</div>;
}