import Icon, { SizeProp, ThickProp } from "../Icon/Icon";
import Tooltip from "../Tooltip/Tooltip";
import IconProp from "../../../Types/Icon/IconProp";
import React, { useState } from "react";
const ObjectIDView = (props) => {
    const [copied, setCopied] = useState(false);
    const handleCopy = async () => {
        var _a;
        await ((_a = navigator.clipboard) === null || _a === void 0 ? void 0 : _a.writeText(props.objectId));
        setCopied(true);
        setTimeout(() => {
            setCopied(false);
        }, 2000);
    };
    return (React.createElement("div", { className: "inline-flex items-center gap-2 group/objectid cursor-pointer", onClick: handleCopy, role: "button", tabIndex: 0, onKeyDown: async (e) => {
            if (e.key === "Enter" || e.key === " ") {
                await handleCopy();
            }
        } },
        React.createElement(Tooltip, { text: copied ? "Copied!" : "Click to copy" },
            React.createElement("div", { className: `inline-flex items-center gap-2 px-2.5 py-1.5 rounded-md font-mono text-sm transition-all duration-200 ${copied
                    ? "bg-green-50 border border-green-200 text-green-700"
                    : "bg-gray-50 border border-gray-200 text-gray-700 hover:bg-gray-100 hover:border-gray-300"}` },
                React.createElement("code", { className: "break-all" }, props.objectId),
                React.createElement("div", { className: `flex-shrink-0 transition-all duration-200 ${copied
                        ? "text-green-500"
                        : "text-gray-400 group-hover/objectid:text-gray-600"}` }, copied ? (React.createElement(Icon, { icon: IconProp.CheckCircle, size: SizeProp.Small, thick: ThickProp.Thick, className: "h-3.5 w-3.5" })) : (React.createElement(Icon, { icon: IconProp.Copy, size: SizeProp.Small, thick: ThickProp.Thick, className: "h-3.5 w-3.5" })))))));
};
export default ObjectIDView;
//# sourceMappingURL=ObjectIDView.js.map