import { Icon } from "./Icon/Icon.js";
import { Tooltip } from "./Tooltip.js";
import { UnstyledButton } from "./UnstyledButton.js";
import styled from "@emotion/styled";
import { useState } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
import { nanoid } from "nanoid";
//#region src/components/CopyToClipboardButton.tsx
const CopyToClipboardButton = (props) => {
	const originalTooltipContent = props.tooltipContent || "Click to copy";
	const icon = props.icon || "Copy";
	const id = `copy-node-name-${props.id ?? nanoid()}`;
	const [tooltipContent, setTooltipContent] = useState(originalTooltipContent);
	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Button, {
		type: "button",
		onClick: () => {
			(async () => {
				try {
					await navigator.clipboard.writeText(props.value);
					setTooltipContent("Copied!");
				} catch {
					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(Tooltip, {
		id,
		place: props.place || "right",
		content: tooltipContent
	})] });
};
const Children = styled.span`
  margin-right: 4px;
`;
const Button = styled(UnstyledButton)`
  background: rgba(0, 0, 0, 0);
  vertical-align: middle;
  ${({ ml }) => ml ? `margin-left: ${ml}px` : ""};
`;
//#endregion
export { CopyToClipboardButton };
