import styled, { css } from 'styled-components';
import { TextElementEnum, TextProps } from 'types';
import { fontSizeDecorator, marginDecorator } from 'utils';

// TODO update colors to a theme color
const textBorderHelper = (size?: TextElementEnum) => {
	switch (size) {
		case 'h6':
		case 'h5':
			return `border-bottom: 1px solid #cccccc;`;
		case 'h4':
		case 'h3':
			return `border-bottom: 2px solid #cccccc;`;
		case 'h2':
		case 'h1':
			return `border-bottom: 3px solid #cccccc;`;
		case 'small':
		case 'p':
		case 'span':
		default:
			return `text-decoration: underline; text-decoration-color: #cccccc;`;
	}
};

export const Text = styled.span<TextProps>`
	font-style: ${({ italic }) => (italic ? 'italic' : 'normal')};
	font-weight: ${({ weight }) => weight || 'normal'};
	${({ block }) =>
		block
			? css`
					display: block;
					${() => marginDecorator({ my: 0.5 })}
			  `
			: ''}
	${({ size, underlined }) => (underlined ? textBorderHelper(size) : '')}
	${({ size }) => fontSizeDecorator(size)} 
	${props => marginDecorator(props)}
`;