"use client";

export function CopySlugButton({ slug }: { slug: string }) {
  return (
    <button
      onClick={() => {
        navigator.clipboard.writeText(slug).then(() => {
          const btn = document.getElementById(`copy-btn-${slug.replace(/\//g, '-')}`);
          if (btn) {
            const original = btn.textContent;
            btn.textContent = '✅ Copied!';
            btn.classList.add('text-green-300', 'border-green-400');
            setTimeout(() => {
              if (btn) {
                btn.textContent = original;
                btn.classList.remove('text-green-300', 'border-green-400');
              }
            }, 1500);
          }
        });
      }}
      id={`copy-btn-${slug.replace(/\//g, '-')}`}
      className="text-left w-full sm:w-auto font-mono text-blue-300 hover:text-green-300 bg-gray-950 border border-gray-700 hover:border-green-500 px-4 py-2 rounded-lg text-sm transition cursor-copy break-all"
      title="Klik untuk copy"
    >
      {slug}
    </button>
  );
}