import { Check, Copy } from 'lucide-react';
import { useState } from 'react';
import { cn } from '#/lib/utils.js';

/**
 * A value shown short and copied in full. A DID, a CID and a space URI are all
 * things a reader pastes into a terminal rather than reads, so the whole string
 * goes to the clipboard whatever the page displays.
 */
export function Copyable({ value, children, className, title }) {
  const [copied, setCopied] = useState(false);

  return (
    <button
      type="button"
      title={title || value}
      onClick={async () => {
        await navigator.clipboard.writeText(value);
        setCopied(true);
        setTimeout(() => setCopied(false), 1200);
      }}
      className={cn(
        'group inline-flex min-w-0 cursor-pointer items-center gap-1.5 text-left font-mono text-[12px] text-muted-foreground hover:text-foreground',
        className,
      )}
    >
      <span className="truncate">{children ?? value}</span>
      {copied ? (
        <Check className="size-3 shrink-0 text-success" />
      ) : (
        <Copy className="size-3 shrink-0 opacity-0 transition-opacity group-hover:opacity-60" />
      )}
    </button>
  );
}