import { _ as __assign } from '../tslib.es6-faad35dc.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import MuiBox from '@mui/material/Box';
import { styled } from '@mui/material/styles';
import Button from './Button.js';
import Typography from './Typography.js';
import 'react';
import '../clsx.m-6243b874.js';
import '@mui/material/Button';
import '../theme/colors.js';
import '@mui/material/Typography';
import '../theme/typography.js';

/**
 * Styles
 */
var WalletLogo = styled(MuiBox)(function (_a) {
    var theme = _a.theme;
    return ({
        height: theme.spacing(4),
        width: theme.spacing(4),
        "& svg": {
            height: "100%",
            width: "100%"
        }
    });
});
var WalletButtonRoot = styled(MuiBox)(function (_a) {
    var theme = _a.theme;
    return ({
        "& .Button-root.Mui-disabled": {
            backgroundColor: theme.palette.gray[100]
        },
        "& .MuiButton-label": {
            color: theme.palette.text.primary
        }
    });
});
/**
 * Main
 */
var WalletButton = function (_a) {
    var wallet = _a.wallet, _b = _a.disabled, disabled = _b === void 0 ? false : _b, supportingElement = _a.supportingElement, onWalletButtonClick = _a.onWalletButtonClick;
    return (jsx(WalletButtonRoot, { children: jsx(Button, __assign({ fullWidth: true, align: "left", size: "md", color: "secondary", variant: disabled ? "contained" : "outlined", startIcon: jsx(WalletLogo, { children: wallet.logo }, void 0), onClick: function () {
                if (onWalletButtonClick)
                    onWalletButtonClick(wallet);
            }, disabled: disabled }, { children: jsxs(MuiBox, { children: [jsx(MuiBox, __assign({ textAlign: "left" }, { children: jsx(Typography, __assign({ variant: "calloutBold" }, { children: wallet.name }), void 0) }), void 0), supportingElement && jsx(MuiBox, { children: supportingElement }, void 0)] }, void 0) }), void 0) }, void 0));
};

export { WalletButton as default };
