Copy button with toast hook

'use client';
import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';

// Fallback for browsers/frames where the async clipboard API is blocked.
function legacyCopy(value: string): boolean {
  const ta = document.createElement('textarea');
  ta.value = value;
  ta.setAttribute('readonly', '');
  ta.style.cssText = 'position:fixed;opacity:0;pointer-events:none';
  document.body.appendChild(ta);
  ta.select();
  try {
    return document.execCommand('copy');
  } finally {
    ta.remove();
  }
}

export function useCopyToast(duration = 1800) {
  const [toast, setToast] = useState('');
  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);

  // Clear any pending timer when the component unmounts.
  useEffect(() => () => clearTimeout(timer.current), []);

  const copy = useCallback(
    async (value: string, label = 'Copied to clipboard') => {
      let ok = true;
      try {
        await navigator.clipboard.writeText(value);
      } catch {
        ok = legacyCopy(value);
      }
      clearTimeout(timer.current); // rapid clicks restart the timer
      setToast(ok ? label : 'Copy failed');
      timer.current = setTimeout(() => setToast(''), duration);
      return ok;
    },
    [duration],
  );

  return { copy, toast };
}

export function CopyButton({ value, children = 'Copy' }: { value: string; children?: ReactNode }) {
  const { copy, toast } = useCopyToast();
  return (
    <span className="relative inline-flex items-center gap-3">
      <button
        type="button"
        onClick={() => copy(value)}
        className="rounded-md bg-slate-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-slate-700"
      >
        {children}
      </button>
      {/* Always mounted so assistive tech announces the first message. */}
      <span role="status" aria-live="polite" className="text-sm text-emerald-600">
        {toast}
      </span>
    </span>
  );
}