/* eslint-disable react/require-default-props */
import PropTypes from 'prop-types';
import Button from '@arcblock/ux/lib/Button';
import ConnectLogo from '@arcblock/icons/lib/ConnectLogo';
import { Box } from '@mui/material';

/**
 * ConnectButton
 */
export default function ConnectButton({ children = null, ...rest }) {
  return (
    <Button color="did" variant="contained" {...rest}>
      <Box sx={{ fontWeight: 400 }}>{children || 'Continue With'}</Box>
      <ConnectLogo style={{ width: 'auto', height: '1.2em', margin: '0 4px 0 8px' }} />
    </Button>
  );
}

ConnectButton.propTypes = {
  children: PropTypes.any,
};