'use client';

import { useState } from 'react';
import { Copy, Check } from 'lucide-react';
import { useChatStore } from '@/lib/store/chat-store';

interface CopyButtonProps {
    draftId: number;
    onCopy?: () => void;
    variant?: 'standalone' | 'toolbar';
    className?: string;
    label?: string;
}

/**
 * CopyButton Component
 * 
 * Standalone button to copy draft content to clipboard.
 * Uses ChatStore action which uses ClipboardUtil.
 */
export function CopyButton({
    draftId,
    onCopy,
    variant = 'standalone',
    className = '',
    label = 'Copy'
}: CopyButtonProps) {
    const [copied, setCopied] = useState(false);
    const copyDraftToClipboard = useChatStore(s => s.copyDraftToClipboard);

    const handleCopy = async (e: React.MouseEvent) => {
        e.stopPropagation();
        await copyDraftToClipboard(draftId);
        setCopied(true);
        onCopy?.();
        setTimeout(() => setCopied(false), 2000);
    };

    if (variant === 'toolbar') {
        return (
            <button
                onClick={handleCopy}
                type="button"
                className={`flex-1 min-h-[44px] px-4 py-3 border border-slate-300 rounded-md text-slate-700 hover:bg-slate-50 transition-colors flex items-center justify-center gap-2 ${className}`}
                aria-label={copied ? "Copied to clipboard" : "Copy to clipboard without closing"}
            >
                {copied ? (
                    <Check className="w-5 h-5 text-green-600" aria-hidden="true" />
                ) : (
                    <Copy className="w-5 h-5" aria-hidden="true" />
                )}
                <span>{copied ? 'Copied!' : label}</span>
            </button>
        );
    }

    return (
        <button
            onClick={handleCopy}
            type="button"
            className={`p-2 rounded-md hover:bg-slate-100 transition-colors ${className}`}
            aria-label={copied ? "Copied to clipboard" : "Copy to clipboard"}
        >
            {copied ? (
                <Check className="w-4 h-4 text-green-600" aria-hidden="true" />
            ) : (
                <Copy className="w-4 h-4 text-slate-500" aria-hidden="true" />
            )}
        </button>
    );
}
