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 TypographyProps 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 Typography: React.FC<TypographyProps> = ({
    variant = 'body',
    align = 'inherit',
    gutter = false,
    className,
    ...props
}) => {
    const Tag = variantTagMap[variant] as keyof React.ReactHTML;

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

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

export default Typography;

