"use client";

import * as React from "react";
import { CONTACT_EMAIL_PARTS } from "@/src/content/site";
import { assembleEmail, spellOutEmail } from "@/src/domain/email";

/**
 * EmailLink: shows the contact address without putting it into the page source.
 * The server renders a spelled-out form ("name [at] domain [dot] tld"). The real
 * address and the mailto link are only assembled in the browser. This keeps simple
 * address harvesters out; it does not stop a bot that runs JavaScript.
 */
export const EmailLink: React.FC<{ className?: string }> = ({
  className = "",
}) => {
  const [address, setAddress] = React.useState<string | null>(null);

  React.useEffect(() => {
    setAddress(assembleEmail(CONTACT_EMAIL_PARTS));
  }, []);

  if (address === null) {
    return (
      <span className={className}>{spellOutEmail(CONTACT_EMAIL_PARTS)}</span>
    );
  }

  return (
    <a href={`mailto:${address}`} className={className}>
      {address}
    </a>
  );
};