'use client';

import React, { useState, useEffect } from 'react';

interface ObfuscatedMailtoProps {
    email: string;
    className?: string;
    children?: React.ReactNode;
}

/**
 * Renders an email link that only becomes a clickable mailto: link after client-side hydration.
 * This prevents Cloudflare's Email Obfuscation from breaking the link in the static HTML,
 * which causes crawlers like Ahrefs to report 404 errors on /cdn-cgi/l/email-protection.
 */
export function ObfuscatedMailto({ email, className, children }: ObfuscatedMailtoProps) {
    const [isMounted, setIsMounted] = useState(false);

    useEffect(() => {
        setIsMounted(true);
    }, []);

    // Before hydration, render as obfuscated text to avoid Cloudflare manipulation
    if (!isMounted) {
        const obfuscatedEmail = email.replace('@', ' [at] ').replace(/\./g, ' [dot] ');
        return <span className={className}>{children || obfuscatedEmail}</span>;
    }

    // After hydration, render as a proper mailto link
    return (
        <a href={`mailto:${email}`} className={className}>
            {children || email}
        </a>
    );
}