import styled from 'styled-components';
import React from 'react';
import { sizeStyle, fontStyle, FontStyle, SizeStyle, ElementProps } from '../generator';
import { primaryTxtColor } from '../../config';

interface TextProps extends FontStyle, SizeStyle, ElementProps{
    children? : React.ReactNode;
}

const HeaderLayout = styled.div<{styleProps: any, fontProps: any}>`
${styleProps => sizeStyle(styleProps)}
${fontProps =>fontStyle(fontProps, false)}`;

export const Text = (props: TextProps) => {
    const { children, style, className, onClick } = props;

    const { width, height, max, padding, margin, minWidth } = props;
    const styleProps : SizeStyle = { 
        width, 
        height, 
        max, 
        padding, 
        margin, 
        minWidth 
    };

    const { size, color = primaryTxtColor, bold, textAlign, placeSelf, textShadow } = props;
    const fontProps : FontStyle = {
        size: typeof size === 'number'? (6 - size)/3 + "rem": size? size : "1em",
        color, 
        bold, 
        textAlign : textAlign || 'left',  
        placeSelf, 
        textShadow
    };

    return (
        <HeaderLayout 
            {...props}
            styleProps={styleProps}
            fontProps={fontProps}
            onClick={onClick} 
            className={className} 
            style={style}
        > 
        {children} 
        </HeaderLayout>
    );
}

export default Text;