import React from 'react';
import styles from './typo.module.scss';
import clsx from 'clsx';


type Variant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body';
type Align = 'inherit' | 'left' | 'center' | 'right';

interface TypProps extends React.HTMLAttributes<HTMLElement> {
    variant?: Variant;
    align?: Align;
    gutter?: boolean;
}

const variantTagMap: Record<Variant, keyof JSX.IntrinsicElements> = {
    h1: 'h1',
    h2: 'h2',
    h3: 'h3',
    h4: 'h4',
    h5: 'h5',
    h6: 'h6',
    body: 'p'
};

const Typ: React.FC<TypProps> = ({
    variant = 'body',
    align = 'inherit',
    gutter = false,
    className,
    ...props
}) => {
    const Tag = variantTagMap[variant] as keyof React.ReactHTML;

    const typographyClassName = clsx(
        `md-${variantTagMap[variant]}`,
        {
            [`align-${align}`]: align !== 'inherit',
            [styles['typo-gutter']]: gutter
        },
        className
    );

    return <Tag className={typographyClassName} {...props} />;
};

export default Typ;