"use client";

import { useState } from "react";
import { Check, Copy } from "lucide-react";

interface CopyButtonProps {
  value: string;
  label?: string;
}

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

  async function handleClick() {
    try {
      await navigator.clipboard.writeText(value);
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    } catch {
      // ignore — user can copy manually
    }
  }

  return (
    <button
      type="button"
      onClick={handleClick}
      className="inline-flex items-center gap-1 rounded-lg border border-neutral-200 bg-white px-2.5 py-1 text-xs font-medium text-neutral-600 transition-colors hover:bg-neutral-50"
    >
      {copied ? (
        <>
          <Check size={13} strokeWidth={2.5} aria-hidden className="text-emerald-600" />
          Tersalin
        </>
      ) : (
        <>
          <Copy size={13} strokeWidth={1.75} aria-hidden />
          {label}
        </>
      )}
    </button>
  );
}
