'use client';
import { useState } from 'react';

interface CopyToClipboardProps {
  text: string;
  label?: string;
  displayText?: string;
}

export function CopyToClipboard({ text, label, displayText }: CopyToClipboardProps) {
  const [copied, setCopied] = useState(false);

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(text);
    } catch {
      const textarea = document.createElement('textarea');
      textarea.value = text;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
    }
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <div className="flex items-center gap-2 flex-wrap">
      {label ? <span className="text-xs text-slate-400">{label}</span> : null}
      <div className="flex items-center gap-1 rounded-lg border border-white/10 bg-white/5 px-3 py-2">
        <code className="text-sm font-mono text-slate-200 truncate max-w-[200px]">
          {displayText ?? text}
        </code>
        <button
          onClick={handleCopy}
          className="rounded-md px-2 py-1 text-xs font-medium text-slate-400 hover:bg-white/10 hover:text-slate-200 transition-colors"
          type="button"
        >
          {copied ? 'Copied!' : 'Copy'}
        </button>
      </div>
    </div>
  );
}