import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Copy, Check } from "lucide-react";
import { toast } from "sonner";

async function copyToClipboard(text: string): Promise<boolean> {
  try {
    await navigator.clipboard.writeText(text);
    return true;
  } catch {
    return false;
  }
}

/** An icon button that copies `value`, with its own brief checkmark
 * confirmation - no toast on success, just the icon swap, so copying
 * several fields in a row doesn't stack toasts. */
export function CopyButton({ value, label, className }: { value: string; label: string; className?: string }) {
  const [copied, setCopied] = useState(false);
  return (
    <Button
      variant="outline"
      size="icon"
      className={className ?? "h-8 w-8 shrink-0"}
      aria-label={label}
      onClick={async () => {
        const ok = await copyToClipboard(value);
        if (ok) { setCopied(true); setTimeout(() => setCopied(false), 1500); }
        else toast.error("Couldn't copy");
      }}
    >
      {copied ? <Check size={13} className="text-chart-green" /> : <Copy size={13} strokeWidth={1.5} />}
    </Button>
  );
}