"use client"

import { useEffect, useState } from "react"
import { Mail } from "lucide-react"

interface MailToLinkProps {
  /** When provided (e.g. from Drupal field_email), use this email. Otherwise use fallback. */
  email?: string | null
}

/**
 * Mailto link with icon; email is set on client to reduce harvestability when not passed as prop.
 */
export function MailToLink({ email }: MailToLinkProps) {
  const [href, setHref] = useState<string | null>(email ? `mailto:${email}` : null)

  useEffect(() => {
    if (email) {
      setHref(`mailto:${email}`)
      return
    }
    const localPart = "robert"
    const domain = "nasarek"
    const tld = "dev"
    setHref(`mailto:${localPart}@${domain}.${tld}`)
  }, [email])

  if (!href) {
    return (
      <span className="inline-flex items-center gap-2 text-slate-500">
        <Mail className="size-4 shrink-0" aria-hidden />
        <span>Write me</span>
      </span>
    )
  }

  return (
    <a
      href={href}
      className="inline-flex items-center gap-2 text-emerald-600 outline-none transition-colors duration-200 ease-out hover:text-emerald-500 focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2"
      aria-label="Write me an email"
    >
      <Mail className="size-4 shrink-0" aria-hidden />
      <span>Write me</span>
    </a>
  )
}