import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon } from "@powerhousedao/design-system";
import { useState } from "react";
import { twMerge } from "tailwind-merge";
export const AccountPopoverLogin = ({ onLogin, }) => {
    const [loading, setLoading] = useState(false);
    const allowLogin = !loading && !!onLogin;
    const content = loading ? (_jsx(Icon, { name: "Reload", size: 14, className: "animate-spin" })) : (_jsx("span", { children: "Connect" }));
    const handleLogin = () => {
        if (onLogin) {
            setLoading(true);
            onLogin();
        }
    };
    return (_jsxs("div", { className: "p-4", children: [_jsx("div", { className: "mb-4 flex justify-center", children: _jsx("div", { className: "flex h-[22px] w-[83px] items-center justify-center overflow-hidden", children: _jsx(Icon, { name: "RenownLight", size: 83 }) }) }), _jsx("button", { onClick: allowLogin ? handleLogin : undefined, className: twMerge("mt-4 flex h-7 w-full cursor-pointer items-center justify-center rounded-lg border border-gray-300 bg-transparent text-sm active:opacity-70", allowLogin ? "cursor-pointer" : "cursor-wait"), type: "button", children: content })] }));
};
//# sourceMappingURL=account-popover-login.js.map