import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon, PowerhouseButton } from "@powerhousedao/design-system";
import { useCallback, useState } from "react";
import { twMerge } from "tailwind-merge";
// short eth address
const shortAddress = (address) => `${address.slice(0, 7)}...${address.slice(-5)}`;
export const AccountPopoverUser = ({ address, onDisconnect, etherscanUrl, username = "", }) => {
    const [isCopied, setIsCopied] = useState(false);
    const copyToClipboard = useCallback(async (text) => {
        try {
            await navigator.clipboard.writeText(text);
            setIsCopied(true);
            setTimeout(() => setIsCopied(false), 2000);
        }
        catch (err) {
            console.error("Failed to copy address:", err);
        }
    }, []);
    return (_jsxs("div", { className: "flex flex-col divide-y divide-gray-200 text-gray-900", children: [_jsxs("div", { className: "px-3 py-2", children: [username && _jsx("div", { className: "text-sm font-medium", children: username }), _jsx("div", { className: "mt-1 flex items-center gap-2", children: _jsx(PowerhouseButton, { size: "small", color: "light", onClick: copyToClipboard.bind(null, address), className: "w-full cursor-pointer bg-transparent p-0 active:opacity-70", type: "button", children: _jsxs("div", { className: "relative flex w-full items-center gap-1", children: [_jsxs("div", { className: `flex items-center gap-1 transition-opacity duration-150 ${isCopied ? "opacity-0" : "opacity-100"}`, children: [_jsx("span", { className: "text-xs", children: shortAddress(address) }), _jsx(Icon, { name: "FilesEarmark", color: "#9EA0A1", size: 14 })] }), _jsx("div", { className: `absolute left-0 text-xs transition-opacity duration-150 ${isCopied ? "opacity-100" : "opacity-0"}`, children: "Copied to clipboard!" })] }) }) })] }), etherscanUrl && (_jsx("div", { className: "px-3 py-2", children: _jsxs("a", { href: etherscanUrl, target: "_blank", rel: "noopener noreferrer", className: "flex items-center gap-2 text-sm text-gray-900 hover:text-gray-600", children: [_jsx(Icon, { name: "Ethscan", size: 14 }), "View on Etherscan"] }) })), _jsx("div", { className: "px-3 py-2", children: _jsxs("button", { onClick: onDisconnect, className: twMerge("flex w-full items-center gap-2 text-sm text-red-900", onDisconnect
                        ? "cursor-pointer hover:text-red-700"
                        : "pointer-events-none cursor-wait"), type: "button", children: [_jsx(Icon, { name: "Disconnect", size: 14, color: "#EA4335" }), "Disconnect"] }) })] }));
};
//# sourceMappingURL=account-popover-user.js.map