import { useEffect, useState } from 'react';
import { Check, Copy } from 'lucide-react';
import { IconButton } from './IconButton';
export function CopyButton({ value, label = '复制' }: { value: string; label?: string }) {
  const [copied, setCopied] = useState(false);
  useEffect(() => {
    if (!copied) return;
    const timer = window.setTimeout(() => setCopied(false), 1200);
    return () => window.clearTimeout(timer);
  }, [copied]);
  return (
    <IconButton
      aria-label={copied ? '已复制' : label}
      tooltip={copied ? '已复制' : label}
      onClick={() =>
        void (async () => {
          try {
            if (!navigator.clipboard?.writeText) return;
            await navigator.clipboard.writeText(value);
            setCopied(true);
          } catch {
            setCopied(false);
          }
        })()
      }
      className="h-5 w-5"
    >
      {copied ? <Check className="h-3 w-3 text-success" /> : <Copy className="h-3 w-3" />}
    </IconButton>
  );
}