Copy Button

"use client";

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

export interface CopyButtonProps {
  /** Text copied to the clipboard. */
  value: string;
  /** Shown in the field; defaults to `value`. */
  display?: string;
  label?: string;
  /** Mask the value (e.g. API keys) until revealed by copying. */
  secret?: boolean;
  className?: string;
}

export function CopyButton({ value, display, label = "Copy", secret = false, className }: CopyButtonProps) {
  const [copied, setCopied] = useState(false);

  async function copy() {
    await navigator.clipboard.writeText(value);
    setCopied(true);
    window.setTimeout(() => setCopied(false), 1600);
  }

  const shown = display ?? (secret ? `${value.slice(0, 8)}${"•".repeat(12)}${value.slice(-4)}` : value);

  return (
    <div className={cn("da-stroke inline-flex max-w-full items-stretch bg-da-surface text-da-surface-fg shadow-da-sm", className)}>
      <code className="min-w-0 truncate px-4 py-3 font-da-mono text-sm font-bold">{shown}</code>
      <button
        type="button"
        onClick={copy}
        className={cn(
          "da-focus da-stroke-l da-transition flex shrink-0 items-center gap-2 px-4 font-da-mono text-xs font-bold uppercase",
          copied ? "bg-da-success text-da-success-fg" : "bg-da-primary text-da-primary-fg hover:bg-da-fg hover:text-da-bg",
        )}
      >
        {copied ? <Check aria-hidden className="size-4" strokeWidth={3} /> : <Copy aria-hidden className="size-4" strokeWidth={2.5} />}
        <span aria-live="polite">{copied ? "Copied" : label}</span>
      </button>
    </div>
  );
}

export default CopyButton;