import styled from '@emotion/styled';

const Button = styled.button<{ danger?: boolean }>(({ theme, danger }) => {
	const btnColor = !danger ? theme.colors.primary : theme.colors.lightRed;
	const btnDarkColor = !danger ? theme.colors.darkBlue : theme.colors.lightRed;
	return {
		cursor: 'pointer',
		width: '100%',
		textTransform: 'uppercase',
		fontSize: '14px',
		color: theme.colors.white,
		background: btnColor,
		padding: '0.75em',
		border: `1px solid ${btnColor}`,
		borderRadius: theme.border.radius,
		transition: theme.transition.delay,

		'&:disabled': {
			cursor: 'not-allowed',
			opacity: '0.5',
		},

		'&:not(:disabled):hover': {
			boxShadow: `${btnDarkColor} 0 0 3px 1px`,
			background: btnDarkColor,
			color: theme.colors.white,
		},
	};
});

export default Button;