import {
  UnstyledButton
} from "./chunk-3GS5EFXV.js";
import {
  LightTooltip
} from "./chunk-3EVAP5JT.js";
import {
  Icon
} from "./chunk-RWIZ7Q74.js";
import {
  __async
} from "./chunk-CIGAQ47A.js";

// src/components/CopyToClipboardButton.tsx
import styled from "@emotion/styled";
import { nanoid } from "nanoid";
import { useState } from "react";
import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
var CopyToClipboardButton = (props) => {
  var _a;
  const originalTooltipContent = props.tooltipContent || "Click to copy";
  const icon = props.icon || "Copy";
  const id = `copy-node-name-${(_a = props.id) != null ? _a : nanoid()}`;
  const [tooltipContent, setTooltipContent] = useState(originalTooltipContent);
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsxs(
      Button,
      {
        type: "button",
        onClick: () => {
          void (() => __async(void 0, null, function* () {
            try {
              yield navigator.clipboard.writeText(props.value);
              setTooltipContent("Copied!");
            } catch (err) {
              setTooltipContent("Unable to copy");
            }
            setTimeout(() => {
              setTooltipContent(originalTooltipContent);
            }, 2e3);
          }))();
        },
        css: props.buttonCSS,
        ml: props.ml,
        "data-tooltip-id": id,
        children: [
          props.children ? /* @__PURE__ */ jsx(Children, { children: props.children }) : null,
          /* @__PURE__ */ jsx(Icon, { name: icon, width: props.isSm ? 12 : 16 })
        ]
      }
    ),
    /* @__PURE__ */ jsx(
      LightTooltip,
      {
        id,
        place: props.place || "right",
        content: tooltipContent
      }
    )
  ] });
};
var Children = styled.span`
  margin-right: 4px;
`;
var Button = styled(UnstyledButton)`
  background: rgba(0, 0, 0, 0);
  vertical-align: middle;
  ${({ ml }) => ml ? `margin-left: ${ml}px` : ""};
`;

export {
  CopyToClipboardButton
};
