import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { Popover } from '@transferwise/components';
import { useTheme } from '@wise/components-theming';
import { FormattedMessage } from 'react-intl';
import { i as isWiseAlias } from './aliasFilter-a7b9c811.js';
import { s as styleInject } from './style-inject.es-1f59c1d0.js';

var css_248z = ".cc_logoContainer_2292392129 {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n.cc_logoContainer_2292392129 span[data-toggle='popover'] {\n  border-bottom: none !important;\n}\n.cc_providerLogo_2292392129 {\n  min-width: calc(var(--size-8) * 10);\n  max-width: 8em;\n  max-height: 2em;\n  margin: var(--size-4) 0;\n  object-fit: contain;\n  object-position: 0 0;\n}\n@media (min-width: 768px) {\n  .cc_providerLogo_2292392129 {\n    width: 8em;\n  }\n}\n.cc_poweredByTw_2292392129 {\n  cursor: pointer;\n}\n.cc_poweredByTw_2292392129 .cc_poweredByTwText_2292392129 {\n  margin-right: var(--size-4);\n  color: var(--color-content-primary);\n  font-size: 8px;\n  letter-spacing: 0;\n  line-height: 1;\n}\n.cc_poweredByTw_2292392129 .cc_twLogo_2292392129 {\n  display: inline;\n  width: initial;\n  height: 12px;\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9jb21tb24vUHJvdmlkZXJMb2dvL1Byb3ZpZGVyTG9nby5tb2R1bGUubGVzcyIsIlByb3ZpZGVyTG9nby5tb2R1bGUubGVzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQTtFQUNFLGFBQUE7RUFDQSxzQkFBQTtFQUNBLHVCQUFBO0FDREY7QURGQTtFQU1JLDhCQUFBO0FDREo7QURLQTtFQUNFLG1DQUFBO0VBQ0EsY0FBQTtFQUNBLGVBQUE7RUFDQSx1QkFBQTtFQUNBLG1CQUFBO0VBQ0Esb0JBQUE7QUNIRjtBREtFO0VBQUE7SUFDRSxVQUFBO0VDRkY7QUFDRjtBREtBO0VBQ0UsZUFBQTtBQ0hGO0FERUE7RUFJSSwyQkFBQTtFQUNBLG1DQUFBO0VBQ0EsY0FBQTtFQUNBLGlCQUFBO0VBQ0EsY0FBQTtBQ0hKO0FETEE7RUFZSSxlQUFBO0VBQ0EsY0FBQTtFQUNBLFlBQUE7QUNKSiIsImZpbGUiOiJQcm92aWRlckxvZ28ubW9kdWxlLmxlc3MifQ== */";
var componentStyles = {"logoContainer":"cc_logoContainer_2292392129","providerLogo":"cc_providerLogo_2292392129","poweredByTw":"cc_poweredByTw_2292392129","poweredByTwText":"cc_poweredByTwText_2292392129","twLogo":"cc_twLogo_2292392129"};
styleInject(css_248z);

const ProviderLogo = ({ alias, logo, altText, isPartner = false, styles, providerLogoRedirectUrl, onProviderClick, }) => {
    const derivedStyles = Object.assign(Object.assign({}, componentStyles), styles);
    const { isScreenModeDark } = useTheme();
    const wiseLogoUrl = `https://wise.com/public-resources/assets/logos/wise-personal/logo${isScreenModeDark ? '_inverse' : ''}.svg`;
    let providerLogoUrl = logo;
    if (isScreenModeDark) {
        if (isWiseAlias(alias)) {
            providerLogoUrl = logo.replace('.svg', '_inverse.svg');
        }
        else {
            providerLogoUrl = logo.replace('.svg', '--white.svg');
        }
    }
    const imageTag = (jsx("img", { className: derivedStyles.providerLogo, src: providerLogoUrl, alt: altText, "data-testid": "providerImg" }));
    return (jsxs("span", Object.assign({ className: derivedStyles.logoContainer, "data-testid": "provider-logo" }, { children: [providerLogoRedirectUrl ? (jsx("a", Object.assign({ href: providerLogoRedirectUrl, onClick: onProviderClick, "data-testid": "providerUrlAnchor" }, { children: imageTag }))) : (jsx(Fragment, { children: imageTag })), isPartner && (jsx("div", { children: jsx(Popover, Object.assign({ title: jsx(FormattedMessage, { id: "powered-by-wise" }), content: jsx(FormattedMessage, { id: "powered-by-wise-description" }) }, { children: jsxs("span", Object.assign({ className: derivedStyles.poweredByTw }, { children: [jsx("span", Object.assign({ className: derivedStyles.poweredByTwText }, { children: jsx(FormattedMessage, { id: "powered-by" }) })), jsx("img", { className: derivedStyles.twLogo, src: wiseLogoUrl, alt: "Wise" })] })) })) }))] })));
};

export { ProviderLogo as P };
//# sourceMappingURL=ProviderLogo-ce8211ca.js.map
