klz-cables.com/components/ObfuscatedEmail.tsx

'use client';

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

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

/**
 * A component that helps protect email addresses from simple spambots.
 * It uses client-side mounting to render the actual email address,
 * making it harder for static crawlers to harvest.
 */
export default function ObfuscatedEmail({ email, className = '', children }: ObfuscatedEmailProps) {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    // eslint-disable-next-line react-hooks/set-state-in-effect
    setMounted(true);
  }, []);

  if (!mounted) {
    // Show a placeholder or obscured version during SSR
    return (
      <span className={className} aria-hidden="true">
        {children || email.replace('@', ' [at] ').replace(/\./g, ' [dot] ')}
      </span>
    );
  }

  // Once mounted on the client, render the real mailto link
  return (
    <a href={`mailto:${email}`} className={className}>
      {children || email}
    </a>
  );
}