klz-cables.com/components/ObfuscatedPhone.tsx

'use client';

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

interface ObfuscatedPhoneProps {
  phone: string;
  className?: string;
  children?: React.ReactNode;
}

/**
 * A component that helps protect phone numbers from simple spambots.
 * It stays obscured during SSR and hydrates into a functional tel: link on the client.
 */
export default function ObfuscatedPhone({ phone, className = '', children }: ObfuscatedPhoneProps) {
  const [mounted, setMounted] = useState(false);

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

  // Format phone number for tel: link (remove spaces, etc.)
  const telLink = `tel:${phone.replace(/\s+/g, '')}`;

  if (!mounted) {
    // Show a placeholder or obscured version during SSR
    // e.g. +49 881 925 [at] 37298
    const obscured = phone.replace(/(\d{3})(\d{3})$/, ' $1...$2');
    return (
      <span className={className} aria-hidden="true">
        {children || obscured}
      </span>
    );
  }

  return (
    <a href={telLink} className={className}>
      {children || phone}
    </a>
  );
}