"use client";

import { useState } from "react";
import { Check, Copy } from "lucide-react";

/**
 * An email address that opens a mail client on click, with a copy button
 * that fades in only on hover (invisible at rest) so lists of these don't
 * look cluttered with icons.
 */
export function CopyableEmail({ email }: { email: string }) {
  const [copied, setCopied] = useState(false);

  const copy = async () => {
    await navigator.clipboard.writeText(email);
    setCopied(true);
    setTimeout(() => setCopied(false), 1200);
  };

  return (
    <span className="group inline-flex items-center gap-1">
      <button
        type="button"
        onClick={copy}
        title={copied ? "Copied!" : "Copy email address"}
        className="focus-ring rounded p-0.5 text-slate-400 opacity-0 transition-opacity duration-200 hover:text-brand-600 group-hover:opacity-100"
      >
        {copied ? (
          <Check className="h-3 w-3 text-green-600" aria-hidden />
        ) : (
          <Copy className="h-3 w-3" aria-hidden />
        )}
      </button>
      <a href={`mailto:${email}`} className="text-brand-600 hover:underline">
        {email}
      </a>
    </span>
  );
}