import { vars, classNames } from '@imwebme/clay-token';
import { ElementType, PropsWithChildren, CSSProperties } from 'react';
import { BaseProps } from '../types.cjs';
import '@emotion/react';

type TypographyProps<Element extends ElementType> = PropsWithChildren<BaseProps<Element>> & {
    /**
     * 텍스트 색상을 지정할 수 있습니다.
     * @default text
     */
    colorToken?: keyof typeof vars.semantic.color;
    /**
     * @deprecated please use variant props
     */
    semanticToken?: keyof typeof classNames.typography;
    variant?: keyof typeof classNames.typography;
    whiteSpace?: CSSProperties["whiteSpace"];
    textAlign?: CSSProperties["textAlign"];
    /**
     * line-clamp 속성을 활용해, 몇 줄까지 ellipsis 효과를 부여할 건지를 결정합니다.
     * @default undefined
     */
    numOfLine?: number;
};

export { TypographyProps };