import { Text } from 'react-email';
import { colors } from './theme';

interface TextProps {
	children: React.ReactNode;
	style?: React.CSSProperties;
}

export const Paragraph = ({ children, style }: TextProps) => (
	<Text style={{ ...paragraphStyle, ...style }}>{children}</Text>
);

export const Muted = ({ children, style }: TextProps) => (
	<Text style={{ ...mutedStyle, ...style }}>{children}</Text>
);

const paragraphStyle = {
	margin: '0 0 16px 0',
	fontSize: '15px',
	lineHeight: '24px',
	color: colors.text
};

const mutedStyle = {
	margin: '16px 0 0 0',
	fontSize: '13px',
	lineHeight: '20px',
	color: colors.mutedForeground
};