import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback } from 'react';
import { withRequiredCommonProps, } from '../../../../lib/seam/components/common-props.js';
import { useCreateConnectWebview } from '../../../../lib/seam/connect-webviews/use-create-connect-webview.js';
import { useComponentTelemetry } from '../../../../lib/telemetry/index.js';
import { Button } from '../../../../lib/ui/Button.js';
export const NestedConnectAccountButton = withRequiredCommonProps(ConnectAccountButton);
export function ConnectAccountButton({ className, } = {}) {
    useComponentTelemetry('ConnectAccountButton');
    const { isPending, mutate } = useCreateConnectWebview({
        willNavigateToWebview: true,
    });
    const handleClick = useCallback(() => {
        mutate({
            custom_redirect_url: globalThis.location?.href,
            wait_for_device_creation: true,
        });
    }, [mutate]);
    return (_jsx(Button, { size: 'small', onClick: handleClick, className: className, disabled: isPending, children: t.connectAccount }));
}
const t = {
    connectAccount: 'Connect Account',
};
//# sourceMappingURL=ConnectAccountButton.js.map