import React, { ElementType, FunctionComponent } from "react";
import classNames from "classnames";

export type TypographyTypes =
    "body"
    | "caption"
    | "header1"
    | "header2"
    | "header3"
    | "header4"
    | "header5"
    | "subhead"
    | "xs"
    | "xxs";

export interface TypographyProps {
    /** Child elements. */
    children?: any;
    /** CSS class names. */
    className?: string;
    /** Customize the tag element (defaults to 'span'). */
    tag?: ElementType;
    /** Typography styles to use. */
    type: TypographyTypes;
}

export const Typography: FunctionComponent<TypographyProps> = ({
    children,
    className,
    tag: Tag = "span",
    type,
    ...props
}: TypographyProps) => {

    return (
        <Tag className={classNames(`axiom-typography--${type}`, className)} {...props}>
            {children}
        </Tag>
    );
}

Typography.displayName = "Typography";