import { Button as EmailButton, Section } from 'react-email';
import { colors, fonts, radius } from './theme';

interface ButtonProps {
	href: string;
	children: React.ReactNode;
}

export const Button = ({ href, children }: ButtonProps) => (
	<Section style={containerStyle}>
		<EmailButton href={href} style={buttonStyle}>
			{children}
		</EmailButton>
	</Section>
);

const containerStyle = {
	margin: '24px 0 8px 0',
	textAlign: 'center' as const
};

const buttonStyle = {
	display: 'inline-block',
	padding: '12px 28px',
	backgroundColor: colors.primary,
	color: colors.primaryForeground,
	borderRadius: radius.pill,
	fontFamily: fonts.sans,
	fontSize: '14px',
	lineHeight: '20px',
	fontWeight: 500,
	textDecoration: 'none'
};