"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.
 */
type AddressData = {
  fullname: string
  street: string
  city: string
  country: string
}

export function ObfuscatedAddress({ className }: { className?: string }) {
  const [address, setAddress] = useState<AddressData | null>(null)

  useEffect(() => {
    setAddress({
      fullname: "Robert Nasarek",
      street: "Kleine Ulrichstraße 1",
      city: "Halle (Saale)",
      country: "Germany",
    })
  }, [])

  if (!address) {
    return (
      <span className={className}>
        <noscript>Robert Nasarek, Kleine Ulrichstraße 1, Halle (Saale), Germany</noscript>
        <span aria-hidden>…</span>
      </span>
    )
  }

  return (
    <p className={className}>
      {address.fullname}
      <br />
      {address.street}
      <br />
      {address.city}
      <br />
      {address.country}
    </p>
  )
}