popiart-server/web/components/copy-button.tsx

"use client";

import { useEffect, useRef, useState } from "react";

export function CopyButton({
  value,
  copyLabel,
  copiedLabel,
  className = "",
}: {
  value: string;
  copyLabel: string;
  copiedLabel: string;
  className?: string;
}) {
  const [copied, setCopied] = useState(false);
  const timeoutRef = useRef<number | null>(null);

  useEffect(() => {
    return () => {
      if (timeoutRef.current) {
        window.clearTimeout(timeoutRef.current);
      }
    };
  }, []);

  async function handleCopy() {
    try {
      await navigator.clipboard.writeText(value);
      setCopied(true);
      if (timeoutRef.current) {
        window.clearTimeout(timeoutRef.current);
      }
      timeoutRef.current = window.setTimeout(() => {
        setCopied(false);
      }, 1400);
    } catch {
      setCopied(false);
    }
  }

  return (
    <button className={className} onClick={handleCopy} type="button">
      {copied ? copiedLabel : copyLabel}
    </button>
  );
}