"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { Copy, Check } from "lucide-react";
import { sel } from "../../lib/test/index.js";
function CopyableId({
  id,
  truncateAt = 8,
  entitySlug,
  className
}) {
  const [copied, setCopied] = useState(false);
  const handleCopy = async () => {
    await navigator.clipboard.writeText(id);
    setCopied(true);
    setTimeout(() => setCopied(false), 2e3);
  };
  const displayId = id.length > truncateAt ? `${id.slice(0, truncateAt)}...` : id;
  return /* @__PURE__ */ jsxs(
    "button",
    {
      onClick: handleCopy,
      className: `flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer ${className || ""}`,
      "data-cy": entitySlug ? sel("entities.detail.copyId", { slug: entitySlug }) : sel("entities.detail.copyId", { slug: "generic" }),
      children: [
        /* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
          "ID: ",
          displayId
        ] }),
        copied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-green-500" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
      ]
    }
  );
}
export {
  CopyableId
};
