import { Typography } from '@mui/material';
import { styled } from '@mui/material/styles';
import { Apple as AppleIcon } from '@mui/icons-material';

import RootLoginButton from '../RootLoginButton';

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

const RootAppleLoginButton = styled(RootLoginButton)({
	backgroundColor: '#000000',
	color: 'white',
	'&:hover': {
		backgroundColor: '#3c3c3c',
		borderColor: 'unset',
	},
});

const AppleLoginButton = (props: ButtonProps) => {
	props = {
		key: props?.id,
		onClick: () => console.log("I've been clicked!"),
		startIcon: (
			<div className='button-icon no-chiclet'>
				<AppleIcon />
			</div>
		),
		children: (
			<Typography variant='button' className='login-button-text'>
				Sign in with Apple
			</Typography>
		),
		...props,
	};

	if (props?.variant === 'secondary') {
		return <RootLoginButton {...props} />;
	}

	return <RootAppleLoginButton {...props} />;
};

AppleLoginButton.defaultProps = {
	id: 'apple-button',
	variant: 'secondary',
};

export default AppleLoginButton;
