import { useState } from "react";
import { Eye, EyeOff } from "lucide-react";

interface ContactRevealProps {
  label: string;
  value: string;
  href?: string;
  isZh?: boolean;
}

export default function ContactReveal({ label, value, href, isZh }: ContactRevealProps) {
  const [revealed, setRevealed] = useState(false);
  const masked = "******";

  return (
    <li className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between border-b border-border/70 pb-3 last:border-none last:pb-0">
      <span className="font-semibold text-foreground">{label}</span>
      <span className="flex items-center gap-2">
        {revealed ? (
          href ? (
            <a
              href={href}
              target="_blank"
              rel="noopener noreferrer"
              className="text-primary hover:text-primary/80 break-all text-sm"
            >
              {value}
            </a>
          ) : (
            <span className="text-foreground break-all text-sm">{value}</span>
          )
        ) : (
          <span className="text-muted-foreground tracking-widest text-sm">{masked}</span>
        )}
        <button
          type="button"
          onClick={() => setRevealed((prev) => !prev)}
          className="inline-flex items-center justify-center rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
          aria-label={revealed ? (isZh ? "隐藏" : "Hide") : (isZh ? "显示" : "Reveal")}
          title={revealed ? (isZh ? "点击隐藏" : "Click to hide") : (isZh ? "点击显示" : "Click to reveal")}
        >
          {revealed ? <EyeOff size={16} /> : <Eye size={16} />}
        </button>
      </span>
    </li>
  );
}
