'use client';

import { useState } from 'react';
import { Copy, Check } from 'lucide-react';
import { toast } from '@/components/toast';
import { cn } from '@/lib/utils';

interface CopyButtonProps {
  text: string;
  className?: string;
  label?: string;
  showOnHover?: boolean;
}

export function CopyButton({ text, className, label = 'Copied!', showOnHover = true }: CopyButtonProps) {
  const [copied, setCopied] = useState(false);

  const handleCopy = async (e: React.MouseEvent) => {
    e.stopPropagation();
    
    if (!navigator?.clipboard) {
      toast.error('Clipboard not supported');
      return;
    }

    try {
      await navigator.clipboard.writeText(text);
      setCopied(true);
      toast.success(label);
      setTimeout(() => setCopied(false), 2000);
    } catch {
      toast.error('Failed to copy');
    }
  };

  return (
    <button
      onClick={handleCopy}
      className={cn(
        'p-1.5 rounded-lg transition-all',
        showOnHover && 'opacity-0 group-hover:opacity-100',
        'hover:bg-white/[0.08] text-white/40 hover:text-white/70',
        className
      )}
      title="Copy"
    >
      {copied ? (
        <Check className="h-3.5 w-3.5 text-emerald-400" />
      ) : (
        <Copy className="h-3.5 w-3.5" />
      )}
    </button>
  );
}






