"use client"

import { useEffect, useState } from "react"

/**
 * Renders a mailto link only after client mount so the email is not in the
 * server-rendered HTML, reducing harvestability by bots that scan static HTML.
 * Parts are hardcoded so they live in the JS bundle, not in page HTML.
 */
export function ObfuscatedEmail({ className }: { className?: string }) {
  const [email, setEmail] = useState<string | null>(null)

  useEffect(() => {
    const localPart = "robert"
    const domain = "nasarek"
    const tld = "dev"
    setEmail(`${localPart}@${domain}.${tld}`)
  }, [])

  if (!email) {
    return (
      <span className={className}>
        <noscript>robert [at] nasarek [dot] dev</noscript>
        <span aria-hidden>…</span>
      </span>
    )
  }

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