"use client";
import { useState, useCallback } from "react";

export function Copyable({ text, className = "" }: { text: string; className?: string }) {
  const [copied, setCopied] = useState(false);

  const copy = useCallback(() => {
    navigator.clipboard.writeText(text);
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  }, [text]);

  return (
    <span
      onClick={copy}
      className={`cursor-pointer hover:underline decoration-dotted underline-offset-2 ${className}`}
      title="Click to copy"
    >
      {copied ? "OK copied" : text}
    </span>
  );
}