"use client";

import { useEffect, useState } from "react";

/**
 * Render an email address split into user + domain attributes so simple
 * HTML scrapers don't see a usable address in the server-rendered DOM.
 * On mount we assemble the address client-side and wrap in a real mailto.
 *
 * Pre-mount HTML looks like:
 *   <span data-u="ryan" data-d="broadcastbeat.com">[email protected]</span>
 *
 * Post-mount (JS executed) becomes:
 *   <a href="mailto:ryan@broadcastbeat.com">ryan@broadcastbeat.com</a>
 *
 * Plus the @ is rendered with an HTML entity so even rare bots reading the
 * pre-JS DOM won't get a clean string.
 */
export default function ObfuscatedEmail({
  user,
  domain,
  className,
}: {
  user: string;
  domain: string;
  className?: string;
}) {
  const [revealed, setRevealed] = useState(false);
  useEffect(() => setRevealed(true), []);

  if (!revealed) {
    return (
      <span
        data-u={user}
        data-d={domain}
        className={className}
        suppressHydrationWarning
      >
        [email&nbsp;protected]
      </span>
    );
  }

  const addr = `${user}@${domain}`;
  return (
    <a href={`mailto:${addr}`} className={className}>
      {addr}
    </a>
  );
}