import { createElement, forwardRef } from 'react';
import { getTypographyRole } from './utils/get-typography-role';
import {
    TypographyProps,
    Typography as TypographyTargetRef,
} from './typography.types';

export const Typography = forwardRef<TypographyTargetRef, TypographyProps>(
    ({ size, role, children, ...props }, ref) => {
        const typeElement = getTypographyRole(role, size);

        const extraClasses =
            `m3 m3-typography ${size && role ? `${role}-${size}` : ''}`.trimEnd();

        return createElement(
            typeElement,
            {
                ...props,
                ref: ref,
                className: extraClasses,
            },
            children,
        );
    },
);