import { Button } from '@mui/material';
import { styled } from '@mui/material/styles';

import type { ButtonProps } from '@mui/material';

const StyledLoginButton = styled(Button)({
	height: '50px',
	minWidth: '16rem',
	padding: 0,
	// border: '1px solid transparent',
	justifyContent: 'flex-start',
	textAlign: 'center',
	// '&:hover': {
	// 	backgroundColor: '#051131',
	// 	boxShadow: 'unset',
	// },
});

const RootLoginButton = ({ icon, ...props }: RootLoginButtonProps) => {
	return (
		<StyledLoginButton
			{...{
				startIcon: icon && (
					<div className='button-icon no-chiclet'>{icon}</div>
				),
				...props,
			}}
		></StyledLoginButton>
	);
};

RootLoginButton.defaultProps = {
	color: 'secondary',
	className: 'login-button google-button',
	fullWidth: true,
	variant: 'secondary',
};

export default RootLoginButton;

export interface RootLoginButtonProps extends ButtonProps {
	icon?: React.ReactNode;
}
