import React from 'react';
import classNames from 'classnames';
import {
    FontWeightVariants,
    TypographyHtmlTagVariants,
    TypographyFontWeightVariantsMap
} from 'core/_variants'


interface Props extends React.ComponentPropsWithoutRef<"div"> {
    htmlTag?: TypographyHtmlTagVariants | undefined;
    fontWeightVariant?: FontWeightVariants;
};

const typographyFontWeightVariants: TypographyFontWeightVariantsMap<string> = {
    thin: 'font-thin',
    extralight: 'font-extralight',
    light: 'font-light',
    normal: 'font-normal',
    medium: 'font-medium',
    semibold: 'font-semibold',
    bold: 'font-bold',
    extrabold: 'font-extrabold',
    black: 'font-black'

}

const Typography = ({ 
        children,
        htmlTag,
        fontWeightVariant='normal',
        className
    }: Props) => {
        const As = htmlTag || 'div'  ;
        return (
            <As
                className={classNames([
                    [`${typographyFontWeightVariants[fontWeightVariant]}`],
                    className
                ])} 
            >
                {children}
            </As>
        );
}

export default Typography