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

/** A value in a code box with a copy button (links, embed codes, secrets). */
export function CopyText({ value, testId, multiline, className }: { value: string; testId?: string; multiline?: boolean; className?: string }) {
    const [done, setDone] = useState(false);
    return (
        <span className={cn('flex min-w-0 items-start gap-1.5', className)}>
            <code className={cn('min-w-0 flex-1 rounded bg-stone-100 px-2 py-1 text-xs', multiline ? 'whitespace-pre-wrap break-all' : 'break-all')} data-testid={testId}>{value}</code>
            <button type="button" className="shrink-0 rounded p-1 text-ink-muted hover:bg-stone-100" aria-label="Copy"
                onClick={() => { navigator.clipboard?.writeText(value); setDone(true); setTimeout(() => setDone(false), 1500); }}>
                {done ? <CheckCircle2 className="h-3.5 w-3.5 text-green-700" /> : <Copy className="h-3.5 w-3.5" />}
            </button>
        </span>
    );
}