"use client";

import { useState } from "react";

// Kleiner Kopier-Button (Code, Link …) — 2 s "Kopiert"-Rückmeldung, danach
// zurück. Gleiches Muster wie ReferralCodeCard / ShareFolderPanel.
export function CopyButton({
  value,
  label,
  copiedLabel,
  className,
}: {
  value: string;
  label: string;
  copiedLabel: string;
  className?: string;
}) {
  const [copied, setCopied] = useState(false);

  return (
    <button
      type="button"
      onClick={() => {
        navigator.clipboard
          ?.writeText(value)
          .then(() => {
            setCopied(true);
            setTimeout(() => setCopied(false), 2000);
          })
          .catch(() => {});
      }}
      className={
        className ??
        "shrink-0 rounded-lg border border-white/30 px-3 py-1.5 text-xs uppercase tracking-[0.1em] transition-colors hover:border-white"
      }
    >
      {copied ? copiedLabel : label}
    </button>
  );
}