'use client';

import { useRouter } from 'next/navigation';
import { MouseEvent } from 'react';

interface DocContentProps {
    contentHtml: string;
}

export function DocContent({ contentHtml }: DocContentProps) {
    const router = useRouter();

    const handleLinkClick = (e: MouseEvent<HTMLElement>) => {
        const target = e.target as HTMLElement;
        const anchor = target.closest('a');

        if (anchor && anchor.href) {
            const url = new URL(anchor.href);

            // If it's an internal link on the same origin
            if (url.origin === window.location.origin) {
                e.preventDefault();
                router.push(url.pathname + url.search + url.hash);
            }
        }
    };

    return (
        <div
            className="doc-article"
            onClick={handleLinkClick}
            dangerouslySetInnerHTML={{ __html: contentHtml }}
        />
    );
}