import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, IconButton, Stack, Typography } from '@mui/material';
import googleLogo from '../../../../../assets/google.svg';
import microsoftLogo from '../../../../../assets/microsoft.svg';
import oktaLogo from '../../../../../assets/okta.svg';
const getLogo = (type) => {
    switch (type) {
        case 'Microsoft':
            return microsoftLogo;
        case 'Google':
            return googleLogo;
        case 'Okta':
            return oktaLogo;
    }
};
const SSOButton = ({ type, onClick }) => (_jsxs(Stack, { sx: { alignItems: 'center', gap: 0.5 }, children: [_jsx(IconButton, { onClick: onClick, sx: theme => {
                const border = `1px solid ${theme.palette.new.border.neutral.divider}`;
                return {
                    p: 2,
                    border,
                    backgroundColor: 'background.default',
                    borderRadius: '50%',
                    '&:hover': { border },
                    '&:focus-visible': { border },
                    '&.Mui-disabled': { border },
                };
            }, children: _jsx(Box, { component: "img", src: getLogo(type), alt: type, height: 24, width: 24, sx: type === 'Okta'
                    ? {
                        filter: theme => theme.palette.mode === 'dark' ? 'invert(1)' : 'none',
                    }
                    : undefined }) }), _jsx(Typography, { variant: "globalXS", sx: {
                color: theme => theme.palette.new.text.neutral.lighter,
            }, children: type })] }));
export default SSOButton;
