import {HTMLAttributes, ReactNode, DetailedHTMLProps} from 'react';
import {ColorsNameType} from '../../../../types/entities/colors-name';

export type TypographySizesType =
    | 'display2XL'
    | 'displayXL'
    | 'displayLG'
    | 'displayMD'
    | 'displaySM'
    | 'displayXS'
    | 'textXL'
    | 'textLG'
    | 'textMD'
    | 'textSM'
    | 'textXS'
    | 'textXXS';

export type TypographyWeights =
    | 100
    | 200
    | 300
    | 400
    | 500
    | 600
    | 700
    | 800
    | 900;

export interface ITypographyTags {
    h1: DetailedHTMLProps<
        HTMLAttributes<HTMLHeadingElement>,
        HTMLHeadingElement
    >;
    h2: DetailedHTMLProps<
        HTMLAttributes<HTMLHeadingElement>,
        HTMLHeadingElement
    >;
    h3: DetailedHTMLProps<
        HTMLAttributes<HTMLHeadingElement>,
        HTMLHeadingElement
    >;
    h4: DetailedHTMLProps<
        HTMLAttributes<HTMLHeadingElement>,
        HTMLHeadingElement
    >;
    h5: DetailedHTMLProps<
        HTMLAttributes<HTMLHeadingElement>,
        HTMLHeadingElement
    >;
    h6: DetailedHTMLProps<
        HTMLAttributes<HTMLHeadingElement>,
        HTMLHeadingElement
    >;
    p: DetailedHTMLProps<
        HTMLAttributes<HTMLParagraphElement>,
        HTMLParagraphElement
    >;
    small: DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
    span: DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
    strong: DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
    b: DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
}

export interface ITypography extends HTMLAttributes<HTMLDivElement> {
    tag?: keyof ITypographyTags;
    color?: ColorsNameType;
    size?: TypographySizesType;
    weight?: TypographyWeights;
    children?: ReactNode;
    ref?: React.LegacyRef<HTMLSpanElement> | undefined;
    contentWrapper?: React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLSpanElement>,
        HTMLSpanElement
    >;
}