import { useLingui } from '../../../../../../node_modules/@lingui/react/dist/index.mjs';
import React__default from 'react';
import { SSOIcon } from '../../../assets/sso.mjs';
import Button from '../../components/atoms/Button.mjs';
import { usePresentation, getButtonId } from '../../components/PresentationConfig.mjs';
import { useStytch, useConfig } from '../GlobalContextProvider.mjs';

const iconMap = {
    'google-workspace': 'google',
    'microsoft-entra': 'microsoft',
    okta: 'okta'
};
const SSOButton = ({ connection, onStart })=>{
    const { i18n: $__i18n, _: $__ } = useLingui();
    const stytchClient = useStytch();
    const { ssoOptions } = useConfig();
    const { iconRegistry, options } = usePresentation();
    const { connection_id, display_name, identity_provider } = connection;
    const id = getButtonId(`sso-${display_name}`, options);
    const onButtonClick = ()=>stytchClient.sso.start({
            connection_id,
            signup_redirect_url: ssoOptions?.signupRedirectURL,
            login_redirect_url: ssoOptions?.loginRedirectURL
        }).then(()=>{
            onStart?.(connection);
        });
    const iconName = iconMap[identity_provider];
    const Icon = iconRegistry[iconName] ?? SSOIcon;
    return /*#__PURE__*/ React__default.createElement(Button, {
        variant: "outline",
        onClick: onButtonClick,
        icon: /*#__PURE__*/ React__default.createElement(Icon, null),
        id: id
    }, $__i18n._({
        id: "provider.continueWith",
        message: "Continue with {display_name}",
        values: {
            display_name: display_name
        }
    }));
};

export { SSOButton };
//# sourceMappingURL=SSOButton.mjs.map
